Vue的基本使用 引入vue.js脚本文件： 方式一：在*.html中，添加CDN资源 开发环境：程序员在编写代码时所使用的环境。有错误报告方便调试。 生产环境：正式的线上环境。 创建Vue实例对象 newVue({}) 调用构造函数，创建一个Vue实例 初始化配置项 el选项：Vue实例要控制的页面中哪个区域（值为选择器） 元素element的缩写 必须是一个普通的HTML标签节点，一般是div。 注意：此处el不能为html或者body元素 data选项：将要渲染到页面中的数据（值是对象） 在页面中声明将要被Vue所控制的区域 用Vue语法{{数据}}将数据展示在页面中。 插值语法：双大括号语法 {{}} 格式：{{表达式}} 作用：使用在标签体中，用于获取数据,可以使用JavaScript表达式 使用频率：最多 v-text输出Text指令 格式：v-text='xxxx' v-text指令用于将数据填充到标签中（会覆盖原标签中的默认值），作用于插值表达式类似,更简洁 填充纯文本：如果数据中有HTML标签会将html标签一并输出 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 使用频率：少 v-html输出HTML指令 格式：v-html='xxxx' v-html与v-text区别: v-text:输出的是纯文本，浏览器不会对其再进行html解析，就相当于过去学习的innerText v-html:会将其当html标签解析后输出,就相当于过去学习的innerHTML 复习：以上几个都是内容渲染指令 {{}}：只是占位符，不会覆盖原有内容。 v-once：布尔型属性，一次性插值，只渲染一次。 v-text：会覆盖标签内的默认内容。 v-html：可以解析有HTML标签的字符串，渲染成HTML内容。 v-model双向数据绑定 在input、select、text、checkbox、radio等表单元素元素上可以用v-model指令创建双向数据绑定 v-once 一次性插值 让界面不要跟着数据变化,只渲染一次 v-bind属性绑定指令 完整格式：v-bind:属性名称="绑定的数据" 缩写格式：:属性名称="绑定的数据" 作用：将数据动态绑定到指定的元素上 例如:属性名称="age+1" v-on 事件绑定指令 完整格式：v-on:事件名称="事件处理函数名" 注意点： 增加methods配置项，属性值也是对象，data后面要加逗号分隔。 原生DOM事件：onclickonmouseuponkeyup 对应v-on:的事件名为clickmouseupkeyup(去掉on),@click @mouseup @keyup 注意点: 1绑定回调函数名称的时候,后面可以写()也可以不写，如果需要传参必须有括号 v-on:click="myFn" v-on:click="myFn()" 2可以给绑定的回调函数传递参数 3如果在绑定的函数中需要用到data中的数据必须加上this(控制台打印vm查看属性) style的绑定 v-bind:style='表达式'或 :style='表达式' style的表达式一般为对象 步骤： 1将数据放到对象中:style="{color:'red','font-size':'50px'}" 2将数据放到Model对象中obj:{color:'red','font-size':'80px',} 注意点: 和绑定类名一样,默认情况下v-bind回去Model中查找,找不到所以没有效果 :style="{color:activeColor,fontSize:fontSize+'px'}" 注意：对象中的value值activeColor和fontSize是data中的属性 | 
