2020-09-02

Vue

1.指令

  1.v-mode

	v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）

<input type="text" v-model="nnn">
<button @click="rever">反转</button>
 rever:function(){
                    this.content = this.content.split("").reverse().join("")
                },

 2. v-for

    v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
    v-for = “(item,index)  in    数组名”     
	Item 代表数组中的每一项       index  代表索引		Key 代表对应的键名(1、key来给每个节点做一个唯一标识2、key的作用主要是为了高效的更新虚拟DOM)

案例——选项卡

1.HTML结构

<div id="app">
  <div class="tab">
    <!--  tab栏  -->
    <ul>
      <li class="active">apple</li>
      <li class="">orange</li>
      <li class="">lemon</li>
    </ul>
    <!--  对应显示的图片 -->
    <div class="current"><img src="img/apple.png"></div>
    <div class=""><img src="img/orange.png"></div>
    <div class=""><img src="img/lemon.png"></div>
  </div>
</div>

2.数据准备

list: [{
  id: 1,
  title: 'apple',
  path: 'img/apple.png'
}, {
  id: 2,
  title: 'orange',
  path: 'img/orange.png'
}, {
  id: 3,
  title: 'lemon',
  path: 'img/lemon.png'
}]

3.v-for数据渲染

div id="app">
  <div class="tab">  
    <ul>
      <!--  
1、绑定key的作用 提高Vue的性能 
2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
index 也是唯一的 
3、 item 是 数组中对应的每一项  
4、 index 是 每一项的 索引
-->
      <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
    </ul>
    <div  :key='item.id' v-for='(item, index) in list'>
      <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
      <img :src="item.path">
    </div>
  </div>
</div>
<script>
  new  Vue({
    //  指定 操作元素 是 id 为app 的 
    el: '#app',
    data: {
      list: [{
        id: 1,
        title: 'apple',
        path: 'img/apple.png'
      }, {
        id: 2,
        title: 'orange',
        path: 'img/orange.png'
      }, {
        id: 3,
        title: 'lemon',
        path: 'img/lemon.png'
      }]
    }
  })
</script>

3.v-show  /  v-hide
	v-show 显示内容 （同angular中的ng-show）
    v-hide 隐藏内容（同angular中的ng-hide)

 <p v-show>12345456677</p>
 <p v-hide>1234545</p>

4.v-if
    v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
    v-else-if 必须和v-if连用
    v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误

<p v-if='flag==0'>asdaavdsf</p>
<p v-else-if='flag==1'> 56861</p>
<p v-else>vjjhh</p>
  data:{    flag:0,    }

5.v-bind
    v-bind 动态绑定 作用： 及时对页面的数据进行更改
		***注意**：v-bind:class指令可以与普通的class特性共存
		v-bind 中支持绑定一个对象 ，如果绑定的是一个对象则键为对应的类名，值为对应data中的数据*
	绑定class    
			 v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。
	绑定对象和绑定数组的区别{
			 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据 
			- 绑定数组的时候数组里面存的是data 中的数据 }
	绑定style
			有些时候我们需要绑定内置样式，这个时候我们可以使用v-bind:style绑定属性。

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

<script>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true,
    }
})
</script>

<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>

<div v-bind:style="styleObject">绑定样式对象</div>'
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
 
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>

<script>
	new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

  v-on
    v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

案例——简单计算器

 <div id="add">
        <h1>简单计算器</h1>
        <p>数值A：<input type="text" v-model="num1"></p>
        <select v-model="flag">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <p>数值B：<input type="text" v-model="num2"></p>
        <button @click="sum">计算</button>
        <p>计算结果：<span v-text='num'>{{num}}</span></p>
    </div>
```## 标题
```javascript
<script>
         var vm = new Vue({
            el:'#add',
            data:{
                num1:'',
                num2:'',
                num:'',
                flag:''
            },
            methods:{
                sum(){
                    this.num = eval(this.num1+this.flag+this.num2);
                }
            }
        })

    </script>

	v-text   /   	v-html
	v-text 解析文本
   	v-html 解析html标签	
    v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
    v-once 进入页面时 只渲染一次 不在进行渲染
    v-cloak 防止闪烁
    v-pre 把标签内部的元素原位输出