当前位置： 首页 > Web前端 > HTML

Vue学习笔记之一-入门

时间：2023-04-02 19:38:24 HTML

网址：介绍-Vue.js注意演示的例子都是在JS中将Vue实例绑定到HTML中的指定元素，然后在数据中传递属性Vueinstance或methods中的方法对绑定元素的子元素进行操作，而不是指定ID元素本身。{{message}}

有时候代码是正常的，但是vue会报如下错误，可能是因为在html页面中，js脚本是在html页面渲染之前加载的是的，解决办法是把相关的script标签移到body标签的最后一部分。[Vuewarn]:Cannotfindelement:#element-idDeclarativeRendering-DeclarativeRendering简单文本渲染在HTML元素中写入{{message}}，然后在JS中为data中的message属性指定值，即可以显示指定文字，这是最基本的文字显示方式。在JS中，el用于定位HTML元素。Vue实例中的message属性与HTML中的字段同名，其值将在最终的HTML页面中呈现。如果在控制台中手动更改app1.message的值，可以看到HTML页面中显示的文字也在瞬间更新。{{message}}
varapp1=newVue({el:'#app1',data:{message:'HelloVue!'}})绑定在In中的HTML元素属性HTML，v-bind命令用于绑定到元素的指定属性，如v-bind:title会将Vue实例绑定到HTML元素的title属性。以v-为前缀的指令用于对呈现的DOM执行响应式操作。下面代码的效果是：当鼠标悬停在span元素显示的文本上时，会显示JS中message的值，即：'Youloadedthispageon'+newDate()将鼠标悬停在我身上几秒就可以看到我动态绑定的标题了！
varapp2=newVue({el:'#app2',data:{message:'Youloadedthispageon'+newDate()}})如果你使用下面的第一行，最终呈现的HTML源代码将看起来像第二行而不是预期的：将innerHTML属性绑定到消息字段以显示指定的文本。
//原代码//渲染内容条件判断和循环条件判断Vue不仅可以绑定数据到属性，也可以绑定到DOM的结构。通过将Vue实例中的任何属性值设置为true或false，可以生成或删除该元素。查看最终的HTML源码可以看出，Vue删除一个元素并不会改变其显示属性，而是直接将整个HTML元素替换为字符串，这样更安全，用户也不会被可以查看源代码。获取元素原始内容的方式。现在你看到我了:)

varapp3=newVue({el:'#app3',data:{seen:true}})循环v-for指令用于循环遍历数组中的元素。下面的例子中，Vue实例的todos属性包含三个元素，元素字段名是text，字段值是字符串。在HTML页面中，只需要在ol中写一个li元素即可。通过v-for指令，可以直接根据Vue实例中对应属性中的元素个数生成指定的li元素，不包含原HTML代码中的li元素。对于每个生成的li元素，将其文本设置为绑定的todos属性中相应文本字段的值。也就是说，第一个li元素的值是todos属性中第一个文本字段的值，第二个li元素的值是第二个文本字段的值，依此类推。
    {{todo.text}}
varapp4=newVue({el:'#app-4',data:{todos:[{text:'LearnJavaScript'},{text:'LearnVue'},{text:'Buildsomethingawesome'}]}})app4.todos.push({text:'Youmadeit!'})语句将在Vue实例app4的todos属性末尾添加一个文本字段。处理用户输入并调用函数v-on指令将事件监听器绑定到指定的HTML元素，以便可以调用关联的Vue实例中的方法。在下面的示例中，Vue实例中的reverseMessage方法用于反转message属性中的文本。

{{message}}

反转消息varapp5=newVue({el:'#app-5',data:{message:'HelloVue!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')}}})双向数据绑定v-model实现了双向数据绑定的效果。在下面的示例中，v-model="message"实现了消息的双向绑定。输入控件中输入的内容会同步更新到p元素中。但！p元素的内容改变后，输入控件中的内容不会同步更新。（我们应该如何理解这种双向数据绑定？）

{{message}}

varapp6=newVue({el:'#app-6',data:{message:'HelloVue!'}})组件系统在Vue中，组件-Component是一个非常重要的概念。在编写大型应用程序时，很多地方是通用的，可以分成几个小的、独立的（什么意思？）、可重用的组件。例如，一个以列表形式显示内容的模块可以写成一个大组件，列表中的每一个内容都是一个小组件。本质上，Vue中的组件是具有预定义设置的Vue实例。以下代码演示了如何注册一个Vue组件：一个组件的实例如下：
但是如果你只是简单的按照上面的方式定义一个组件，如果创建了多个组件实例，生成的文字是一样的。为了让每个组件都有不同的内容，可以通过props属性将父域的值传递给子组件。vue.component('todo-item',{props:['todo'],template:'
  • {{todo.text}}
    • '})然后就可以在HTML中传递v-bind指令将父元素的值传递给每个子组件。下面的代码遍历HTML中Vue实例的groceryList属性中的每一项，并将每一项绑定到todo。在定义组件的JS代码中，接收传入的todo，将todo中的字符串显示在li元素中。//定义Vue组件todo-item//组件中使用名为todo的props属性//将数据从父域传递给子组件//下面的代码是渲染传递给todo属性的文本字段to'li'元素中，Vue.component('todo-item',{props:['todo'],template:'
  • {{todo.text}}
    • '}//定义Vue实例中的属性数组groceryListnewVue({...data:{groceryList:[{text:'...'},{text:'...'},{text:'...'}]}})//HTML创建一个todo-item组件//遍历属性数组groceryList中的每一个item//并绑定到todo上//这样每个todo中的数据就可以传递给每个组件再总结一下上面的例子：在Vue实例中定义一个属性数组，数组中的元素用于以有序列表的形式展示在前端页面；定义Vue组件，在Vue实例中设置绑定的props属性的名称和属性数组元素的显示格式；在前端HTML页面，写一个组件，使用v-for遍历属性数组，使用v-bind将数据传递给前台。

    Vue学习笔记之一-入门相关文章
    最新推荐
    猜你喜欢

    Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

    重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。