VUE-1-实例、el、data、数据渲染
一、概念
渐进的意思是我们可以用vue只写一个页面，慢慢的把整个项目用vue替换掉
结合了React和Angular，也有自己的优点
二、Vue实例
页面的值都是从data里来的，随data值的改变而刷新，不用像render那样，只要改变就渲染整个页面
2.1data
data是Vue中存放数据的属性，该属性的值有两种：
- 对象
返回对象的函数（推荐，因为一开始简单的可以用，到后面复杂项目对象就用不了了），实际上就必须是对象
：function可省略
需要用到和保存的数据继续在data里存就好
2.2 el
设置vue实例挂载目标（生效范围），vue实例里面所有的配置只对挂载目标生效，该属性的值是一个CSS选择器
2.3数据渲染
2.3.0模板语法
2.3.1 文本
使用mustache语法{{}}，直接拿到对象里的数据，永远是写在标签内部的，不能写在标签身上
2.3.2 原始HTML
{{}}里的东西都是普通文本，存不了html代码。为了真正的HTML，你需要使用v-html指令
指令：写到html标签身上的，实际上就是以v-开头的属性，在vue里叫指令
2.4 常用指令
2.4.1 v-show指令
false和true对应display：none和block
布尔值也可以去data里面拿
2.4.2 v-bind（非常常用）
动态绑定，v-bind后面的值不是写死的，是从data里面拿的，不是普通字符串，是一个变量一个属性；把后面的值作为变量或属性来使用，可以动态修改的
为什么v-show可以直接跟变量并识别，因为v-show本来就是vue的东西，而v-bind后面要加：href这个不是vue自身的东西，所以要加v-bind，把它变成vue的指令
v-bind可以简写成：
2.5 计算属性
如下
当需要对原数据做一些额外的操作，并且不希望改变原数据，而是得到一个新数据，这时就选择用“计算属性”
computed就是对象写法:{}，里面是计算得到的新属性newname，通过返回拼接data里的name得到，直接this.name就可以拿到data里的数据
对象后的：function可省略
注意：
计算属性的方法，在页面初次渲染时调用一次，后续每次依赖的data值（例子中的name）发生改变时，计算属性的函数就会自动调用执行
2.6 侦听器（侦听属性）
监听的是data里的message属性，newValue是变化之后的值，oldValue是之前的值，一旦变化我们就可以拿到。例如分页，当前页码发生变化，我们就可以在message里发送请求
三、class和style绑定
3.1 class
动态绑定样式，就是满足什么条件下才会有某样式
绑定v-bind，class是一个对象（样式的名字），对象的值是一个布尔值，从data中获取，为true则显示颜色，false则不显示；如想实现点一下变成红色，点一下变成黄色，来回切换，只控制改变布尔值即可
class可以给多个，逗号接着写即可
待完善
以上是 VUE-1-实例、el、data、数据渲染 的全部内容， 来源链接： utcz.com/z/377944.html
