---

新手使用vue笔记

首先要new Vue实例()，后面要学的操作基本都是在传参数对象上面

var vm = new Vue({
        el:app,//el 规定了当前vue实例作用DOM范围，他接受的值可以是一个css3选择器，也可以是一个DOM源生对象
        data:{//data 定义当前vue实例要用到的数据
            testData:"<b>這是一个测试数据</b>",
        }
    })

HTML 结构如下
通过{{}}标识(这种写法称为插值表达式)，可以把data数据渲染到标签内
通过v-html指令做到识别参数内容的标签的效果
通过v-bind指令做到对标签属性的绑定

<div id="va">
    <span v-html="Note"></span>
    <p>{{Note1}} <b><i>{{Note2}}</i></b></p>//
    <a v-bind:href="target">{{Note2}}</a>
    <img v-bind:src="img1" alt="">
</div>

v-on

可以通过v-on语法为标签添加事件
也可以简写成@的形式

<div v-on:click= "testMethod">我是测试文本</div>
<div @click="testMethod">我是测试文本</div>

v-on绑定的事件上可以添加修饰符,代码如下

<div v-on:click.right.stop = "testMethod">我是测试文本</div>

一些常用的修饰符如下
stop 阻止事件冒泡
prevent 阻止默认事件
capture 在事件捕获阶段触发监听事件
self 只有事件在自己身上触发时才会监听，通过冒泡不会触发
once 相当于jq的one事件，只会触发一次
passave 在滚动事件触发时可以提高移动端的性能
enter/up/down/left/right 在添加键盘事件时，只有修饰符规定的按键才会触发

v-block

v-bloak 指令，当模板渲染完毕后会自动消失

<p v-cloak>{{testData}}</p>

v-if

v-if可传入一个布尔值或变量，如果值是true，则将标签渲染在页面上，如果是false则不渲染

<div @click="switchShow" v-if="isShow">点击隐藏</div>

v-show

v-show它控制元素显示或者隐藏，

<div @click="switchShow" v-show="isShow">点击隐藏</div>

和v-if不同,v-show本质是控制元素的css的display属性，但是v-if是直接把标签去除。相比之下，v-show具有比较小的切换开销，而v-if常用在不经常做操作的元素，具有比较小的初始渲染开销

v-else

v-else 必须依附于v-if或者v-else-if指令，当v-if为false时，则v-else绑定的标签会渲染在页面上

<div @click="switchShow" v-if="isShow">点击隐藏</div>
<div class="web" v-else>当上面div隐藏式时出现</div>

v-for

v-for指令，用来循环数据并渲染模板，如果v-for和v-if同时存在，v-for优先级更高

<p v-for="item in obj">{{item()}}</p>

v-for对数组循环可以传入两个参数,item和index
item表示数组里的值,index表示下标值

<p v-for="item,index in testData" >{{item}}----{{index}}</button>

v-for对对象循环可以传入三个参数,item和key和index
item表示键值,key表示键名，index表示对象内元素的下标值

 <p v-for="item,key,index in testData">{{key}}:{{item}}---{{index}}</p>

vue实例上的方法

在vue实例上，我们能够调用vue的方法来实现对数据的操作

new Vue({
      el:"app",
      data:{//這里可以定义变量
            testData:"我是一个测试数据",
            testData2:"我是另一个测试数据"
      },
      methods:{//這里可以定义函数
            changeData(function(){
                    console.log("我是测试changeData方法的");
            )
       },
      computed:{//声明一个新的数据，计算属性的值依赖于别人的值，注意最终值要return出来，计算属性里面不允许有异步操作
             fullData:function(){
                    return this.testData+ this.testData2
             }
      },
      created:function{//声明一个新的数据，计算属性的值依赖于别人的值，注意最终值要return出来，计算属性里面不允许有异步操作，watch可以
              alert("我是一个新的vue实例");
      }
})