vue

1、定义一个基本的vue代码结构

<script>
    var vm = new Vue({
    el: '#app', //节点
    data: { // 属性值
      xxxx:  xxxx
    },
    methods: { //事件，一般在vue中以s结尾的通常为数组，但是methods中是对象
    }
  })
</script>

2、差值表达式v-cloak和v-text

v-cloak:  需要加样式`style：none`， 解决插值表达式闪烁的问题。
v-text: 也可以解决插值表达式闪烁的问题,但是如果需要在里面拼接字符串时，会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

3、v-html 如果插值表达式中有html元素，使用v-html会被解析
4、v-bind： vue提供的属性绑定机制 缩写为 :
5、v-on: vue提供的事件绑定机制，缩写为@

 <input type="button" value="按钮" :title="" @click= "">

箭头函数内部的this永远和外部的this保持一致，用来解决this不一致问题。

() => {}

6.事件修饰符

.stop 阻止冒泡
.prevent 阻止时间的默认行为
.capture 添加事件侦听器时使用时间捕获模式
.self 只当事件在该元素本身（非子元素）触发时触发回调
.once 事件只触发一次

7、 v-bind：实现属性绑定。只能实现数据的单向绑定。

<input type="button" v-bind: value="">

8、 v-model: 实现数据表单元素和model中数据的双向绑定。
注意： v-model只能运用在表单元素中。（input textarea select checkbox）

<input type="button" v-model="">

9、v-for 循环
如：数组遍历

<p v-for="(item, i) in xxx">{{ i }} {{ item }}</p>

对象， 在遍历对象身上的键值对时，除了有key， value，在第三个位置还有一个参数是索引

<p v-for="(key, value, i) in xxx">{{ key }} {{ value }} {{  i  }}</p>

v-for循环中key属性的使用

*v-for循环的时候，key属性只能使用number或者string
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
在组件中，使用v-for循环的时候，或者在一些特殊情况下，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字 :key = *

10、v-if 每次都会重新删除或者创建元素，有较高的切换性能消耗。
11、v-show 每次不会进行dom的删除和创建操作，只是切换了元素的display：none属性。有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用v-if

12 vue常用的数组方法：

• filter(): 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr)   // [32, 33, 16, 40]
console.log(arr1)  // [32, 33, 40]

• map 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

安装vue调试工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?h1=zh-CN