Vue.js(一).vue入门

vue基础

1、下载vue.js
vue官网：https://cn.vuejs.org/v2/guide/ 直接下载文件
2、引用：跟引入jquery一样，利用script标签映入
3、使用：

let vm=new Vue({
	el:""，
	data:{
	}
})

4、基础属性

1. el ：element（元素）
   字符串类型
   用于选择元素，类似css的选择器，#id名、.class名
2. data：
   对象类型
   存放数据 往里面添加属性 数据是响应式的
3. 插值表达式
   {{ }}
   能够使用数字、字符串、数组、对象、表达式
   能够在页面上把data里的属性渲染出来
   示例：

<div id="hu">
	{{msg}}
</div>
<script>
let vm=new Vue({
	el:"#el",
	data:{
		msg:"这是一个示例"
	}
})
</script>

Vue的响应式

页面随数据的变化而改变，数据变化时页面重新渲染
能够用vm.$nextTick 和 Vue.nextTick监听页面的渲染，数据改变后能够看到
这里面的值

vm.msg="改变2"
vm.$nextTick(function(){
     console.log("页面已经重新渲染");
})
vm.msg="改变2"
Vue.nextTick(function(){
   console.log("页面已经重新渲染");
})

注意 ：更改的数据必须是已经存在的属性，且必须被页面渲染过，否则无法重新渲染
1、data里面的属性能够被vue实例对象直接点出来。
因为data里面的属性已经被全权托付给了vue对象
2、为了防止我们起的属性名与vue自带的属性发生冲突，vue会在自带的属性名称前面加上一个$或者_

1. $：表示内容我们能够使用
2. _：表示vue自己内部的方法或属性 我们不能够调用

vue指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
1、v-if语句
顾名思义 这是一个判断语句
v-if=“条件语句”
当判断为真时标签才会渲染出来
示例：

<div id="gu" v-if="pan">
        {{msg}}
</div>
<script>
    let vm = new Vue({
        el: "#gu",
        data: {
            msg: "123",
            pan: true,
            pan2: false
        }
    });
</script>

2、v-else-if语句
用作 v-if 的 else-if 块。可以链式的多次使用：

<div id="gu">
        <div v-if="pan2">
            ahahhaha
        </div>
        <div v-else-if="pan2">
            kkkkkkk
        </div>
        <div v-else-if="pan">
            kkkkkkk2
        </div>
</div>
<script>
    let vm = new Vue({
        el: "#gu",
        data: {
            msg: "123",
            pan: true,
            pan2: false
        }
    });
</script>

跟原生的js里面的else if语句一样
v-else-if必须跟在v-if语句后面

3、v-show语句
同样是条件语句
为真时显示标签
与v-if不同的是：
v-if语句只有条件为true的时候才会渲染页面 也就是把数据显示的页面
而v-show语句已经把页面渲染出来了 他为true时才会将渲染的页面显示出来
示例：

<div id="gu" v-show="pan">
        fffff
        <div v-show="pan2">
            456
        </div>
</div>

4、v-pre
跳过这个元素和它的子元素的编译过程
示例：

<div id="gu" v-pre>
        fffff
        <div v-show="pan2">
            456
        </div>
</div>

5、v-once
只渲染元素一次
后续改变数据时 页面不会重新渲染

<div id="gu" v-once>
        fffff
        <div v-show="pan2">
            456
        </div>
</div>

6、v-text
以文本方式显示data里面的内容 ，且优先级要高于插值表达式
同时使用{{}}和v-text时优先显示v-text里面的值
示例：

<div id="gu" v-text="msg">
       
</div>

7、v-html
能够使用这个语句在页面上插入标签
示例：

尽量不要在做项目的时候使用这个
容易引起XSS攻击

<div id="gu" v-html="msg">
       
</div>
<script>
    let vm = new Vue({
        el: "#gu",
        data: {
            msg: "<div>这是插入的div标签</div>",
            pan: true,
            pan2: false
        }
    });
</script>