vue01

Posted 2021-05-07 h5lcy

想要学习vue框架，第一步首先要在vue官网下载vue.js，然后引入到Hbuilder中

引入之后，首先要先创建一个vue实例对象

var ve = new Vue({})

然后在该实例中添加属性，分别是

el属性：指定布局中的id，该id对应的标签内部的所有元素都可以被该实例控制，超出则失效

data属性：vue中用来提供数据源的

methods属性：为vue对象设置函数的

var ve = new Vue({
     el:"#id",
     data:{
    
},
     methods:{

}
});

下面介绍vue中的指令

vue指令：把vue实例中的属性绘制（渲染）到元素标签中

{{}}指令：作用：能够识别数据源中的数据（可以访问vue中的指令）输出对象的属性以及函数的返回值

v-text指令：绘制文本，类似于原生js中的innerText

v-html指令：可以绘制文本，元素，以及注释节点

vue中的属性绑定指令v-bind，用法：v-bind：属性名，简写 :(：属性名）

v-model双向数据绑定，理解：输入框绑定了数据的值，同时，数据源绑定了输入框的值，所以，当输入框的内容发生改变时，使用过该数据源的地方，就会重新渲染

事件绑定指令v-on，用法：v-on：时间名，简写方式:(@事件名)

v-for指令：遍历数组或者对象，同时创建DOM元素节点