Vue初学一指的是数据改变时，视图也随之改变。(用数据来操作DOM)；用户输入信息时，数据也会改变。上面原理目前只在版

Vue内容学习一

vue的数据相应
插值表达式
操作DOM指令

一: vue数据响应

又称作深入响应式原理或双向数据绑定

指的是数据改变时，视图也随之改变。(用数据来操作DOM)；用户输入信息时，数据也会改变。

上面原理目前只在版本vue2.0。

vue数据响应原理解释：

Vue是通过数据劫持来对数据进行响应式拦截的，通过使用es5的Object.defineProperty中到的getter和setter来进行数据劫持的

数据劫持的对象是Vue中的data选项

如果在Data选项外定义数据，那么是不响应的

二:插值表达式(mustache )

使用
- 内容使用
  - {{msg}} 标签内插入此显示定义的内容
```
 eg:msg:'hello Vue.js'
```
- 属性使用这种使用插值表达式的属性用法叫做指令
  - 注意:属性用法是不加{{}}，而是属性上加指令
```
data:{imgUrl:'http://XXXXX.png'};
<img v-bind:src="imgUrl">
 可以简写：<img :src="imgUrl">
```
支持
1. 对于js数据类型是支持的
2. window对象下的全局变量都不能用，console... 即基本语法的输出语法不能使用
基本语法流程控制不能使用 for循环...
1. 🎉支持运算符操作(基本运算符、三目、短路原则、数组操作等)

Vue指令

作用
- 操作DOM
v-html 和v-text
- v-html可以解析xml类型数据，但是v-text不可以

v-bind

将数据和属性进行单向数据绑定：将vue中的数据赋值给属性值
```
<img v-bind:src="src" alt="">
<img :src="src" alt="">
```

类名绑定

对象形式

  <p :class="{size1:true,bg1:true}">对象绑定类名</p>

数组形式

   <p :class="['size1','bg1']">数组绑定类名</p>
   <p :class="['size1',flag&&'bg1'||'bg2']">数组绑定类名</p>//size1不变，bg1与bg2切换
       <p :class="['size1','bg2']" class="b1"></p> //定义三个类名

样式绑定

对象形式

<p :style="{width:'100px',height:'200px',background:'orange'}"></p>
 <p :style="style1"></p>
    //data下的定义
         style1: {
                    width: '130px',
                    height: '200px',
                    background: 'yellow'

                }

数组形式

<p :style="[{width:'40px',height:'90px'},{background:'black'}]"></p>
<p :style="[size2,bg2]"></p>

条件渲染

if语句

 <p v-if="chengji>=80">优秀</p>
        <p v-else-if="chengji>70&&chengji<80">良好</p>
        <p v-else>及格</p>
        //
        data:{
           chengji: '74'
        }

条件展示 v-show
```
 <p v-show="5>3">ddfffddf</p>
```

总结

思考： v-if  vs  v-show  
      1. 效果看起来一样
      2. why Vue要出两个相似的指令？
        v-if控制的是元素的存在与否
        v-show控制的是元素的display:none属性

思考？ 如果出事条件为假时？ v-if   v-show 谁的性能损耗较高？
v-show

总结： 项目中如何选择哪一个？
频繁切换用  v-show
如果不是很频繁的切换，那我们用 v-if

列表渲染

v-for指令

data: {
               num: 10,
               str: 'bruce',
               arr: [1, 3, 5],
               obj:{name:'五竹叔',age:'23',leavl:'v8'}
           }

number数据渲染 of 
 <ul>
  <li v-for="(item,index) of num" :key="index">{{item}}--{{index}}</li>  </ul>

string of
 <li v-for="(item,index) of str" :key="index">{{item}}--{{index}}</li>

数组 in 
<li v-for="(item,index) in arr" :key="index">{{item}}</li>

  <li v-for="(item,key,index) of obj">{{item}}--{{key}}</li>
  //item是对应的键值(对象的属性值)，而key是键名(对象的属性) index是索引 0开始

key的使用经验

简单数据渲染key可以省略
复杂数据渲染key必须添加
key最好使用id(唯一值，数据库或者自定义传入)

json数据

 json: [{
                    id: 1,
                    brand: 'adidas'
                }, {
                    id: 2,
                    brand: 'nike'
                }, {
                    id: 3,
                    brand: 'puma'
                }]

 <li v-for="item of json" :key="item.id">{{item.brand}}</li>

事件

在methods:{}选项中定义事件

<div v-on:click="hander"></div> //定义click事件
<div @click="hander"></div> //简写

普通事件
vue的事件是原生事件，事件对象为原生事件对象

事件传参

    methods: {
                add() {
                    this.num++
                },
                ex(a, b) {
                    console.log(a);
                    console.log(b);
                }
            }

 <button @click="ex(10,12)"></button>

 <button @click="ex($event,10,12)"></button> //输出事件对象是用$event代替

Vue初学一

Vue内容学习一

一: vue数据响应

二:插值表达式(mustache )

使用

支持

Vue指令