vue(二)—指令详细使用及其区别&实例属性

1、{{}}、v-text和v-html(绑定数据)、v-bind(绑定属性)、v-on(绑定方法)、v-model(数据双向绑定)

v-text和v-html两者的区别是v-text会将标签语义化，v-html不会将标签语义化v-on:可以简写为@v-bind:可以简写为：{{ }} 为模板插值法，用于输出对象属性和函数返回值。数据双向绑定是指在当改变vue实例中的数据时对应的模板中的数据也会改变，同时模板中的数据被修改时，对应的vue示例中的数据也会被实时改变

示例如下： 上面代码的显示结果如下： 2、vue实例中的watch侦听属性和computed计算属性

watch属性是用来侦听vue实例中属性值发生变化时，watch里面定义的方法就会被触发

computed计算属性在处理一些复杂逻辑时是很有用的，它是用来计算vue中的一些属性运算,只有当computed所依赖的数据发生变化时，computed就会触发并进行运算，否则它就是缓存着上一次计算的属性值。 用法示例如下： 显示结果如下： 3、v-if v-else，v-else-if指令和v-show指令

v-if和v-show这两个指令的值是true或者false,用来显示或着隐藏元素，true为显示，false为隐藏

两者区别是：v-if隐藏元素是将要隐藏的元素标签在页面中去除；而v-show是给要隐藏的元素标签添加了display：none属性，但元素标签还在页面中

v-if指令和·v-else指令是对应的，当v-if的值是false时，显示的就是v-else的内容

v-else-if是可以链式的多次使用

v-if和v-show的用法如下 v-if和v-else的用法如下 显示结果: 4、v-for指令 用法如下： 下面代码实现的是每在input框输入一个数据并提交后都会添加到一个数组中，再通过v-for遍历这个数组通过< li>标签显示在下面，并且每次提交后input框都会被清空 vue基础知识点: 一、vue安装&实例创建&挂载点&模板 二、指令详细使用及其区别&实例属性 三、组件与组件的拆分 四、Vue组件之$dispatch和$broadcast 五、vue组件之祖孙传后代provide和inject 六、Vue组件之详细理解并使用props和$emit()