Vue基础

vue

vue数据响应

Vue是单向数据流

• 深入响应式原理/双向数据绑定

1. 数据驱动视图
   • 数据发生改变时，视图也会改变
2. 双向绑定
   • 数据改变，页面改变；页面改变，数据改变
3. new Vue()得到的结果是以标签化呈现的，,称为根实例组件

数据响应原理(Vue2.0)

• Vue是通过数据劫持来对数据进行响应式拦截，通过使用es5的Object.defineProperty()中的getter和setter来进行数据劫持的
• 数据劫持的对象是Vue中的data选项,在data外定义的数据是不做响应的
• 其中:
  • get是做初始化赋值的(设置数据)
  • set是完成数据的重新设置，也就是修改(对象数据已修改就会触发set函数)，参数的值是改变后的值

模板语法(mustache)

用法: 1. 内容里用 2.dom属性上用

1. 插值表达式的属性用法就是vue的新概念:指令
   • 注：属性用法是不加{ {}},但是属性上要加指令
2. 插值表达式js的支持性

• js基本语法
  • 输出语法 ×
    • console
    • alert
    • confirm
    • document.write
  • 流程控制 ×
    • for循环等
  • 运算符
    • 支持三目运算符和短路逻辑
    • 5>3 && ‘真’||‘假’ 相当于 5>3?‘真’:‘假’
• 支持性
  • 1.插值表达式对于js数据类型是支持的(null和undefined是不会显示的)
  • 2.window对象下的全局变量都不能用(因为Vue里面的内容是this.msg,只有data里面的数据才能被响应)
    • eg: window.console.log window.location.xx

for…in 和 for…of的区别:

• for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

• for…in

  • 1.index索引为字符串型数字，不能直接进行几何运算
  • 2.遍历顺序有可能不是按照实际数组的内部顺序
  • 3.使用for in会遍历数组所有的可枚举属性，包括原型,所以for in更适合遍历对象，不要使用for in遍历数组

• for…of

  • 1.for of遍历的只是数组内的元素，而不包括数组的原型属性

• for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

for (var key in myObject) {
   
　　if（myObject.hasOwnProperty(key)){
   
　　　　console.log(key);
　　}
}

指令

用来操作DOM

1. 文本渲染

   • v-html=“data中的变量” 可以识别标签
   • v-text=“data中的变量”
   • v-show=“布尔值” 改变display属性

2. 条件渲染
   - v-if 决定一个标签的存在

   • v-else-if
   • v-else

   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

3. 单向数据绑定

   • v-bind:attr=data中的变量 (数据赋值给标签的属性)

     • 简写 :attr=""

   • 类名的绑定(不会覆盖已存在的class)

     • 对象形式
       • :class="{类名:布尔值}"

       对象形式键名引用变量时要加中括号

           <p :class = "{[ a  ]: true,[ b ]: true }"></p>
       

     • 数组形式
       • :class="[‘size’,‘bg’]" 直接加类名，要加引号,否则会当作全局变量
       • :class="[flag&&‘bg’||‘blue’]"

   • 样式的绑定

     • 对象形式

       注意:样式的值要加引号，否则会当作全局变量

           <p :style = "{
               width: '100px',
               height: '100px',
               background: 'purple'
           }"> 对象形式 </p>
       

       注:样式绑定若有-的属性名，要用大写字母代替，如backgroundColor,fontSize

     • 数组形式

           <p :style = "[{ width: '200px',height: '200px' },{ background: 'yellow' }]"> 数组形式 </p>
           <p :style = "[ chicun,yanse ]"></p>
       

   • 列表渲染

     v-for (每个循环有独立的作用域)

     1. 渲染number/string/arr类型数据
        • in 和 of都可以使用，作用相同
        • 会从1到num遍历
        • 索引index从0开始
        • 第一个参数是值，第二个参数是索引

        <ul>
            <li v-for="(item,index) of num" >{
                {item}}--{
                {index}}</li>
        </ul>
        

     2. 渲染object类型数据

        第三个参数为索引

        <ul>
            <li v-for="(value,key,index) in obj" :key="index">
            <!-- 给每一个渲染的li加上key属性，不是html的属性，不会显示在Elements中  -->
            {
                {value}}--{
                {key}}--{
                {index}}
            </li>
        </ul>
        

     3. 渲染嵌套类型数据

        <ul>
            <li v-for = " item of nest ">
                <h3