Vue入门笔记

1.Vue的三个特点

• JavaScript框架
• 简化Dom操作
• 响应式数据驱动（数据变化，则页面相应的发生变化）

2.第一个Vue程序

• 导入开发版本的Vue.js

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

• 创建Vue实例对象，设置el属性和data属性

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  

• 使用简洁的模板语法，把数据渲染到页面上

  <div id="app">
    {{ message }}
  </div>
  

a.el属性

设置挂载点（通过css选择器设置Vue实例管理的元素）

1.Vue实例的作用范围是什么呢？

el命中的元素外部不可使用Vue实例管理的数据，但是命中元素及其内部后代元素可以随便使用

2.是否可以使用其他的选择器？

支持ID选择器，class选择器等，但最好在开发的使用使用id选择器，因为id是惟一的

3.是否可以设置其他的dom元素呢？

除了div，其他的dom元素也是可以设置的，但只能设置双标签，不能使用html和body

b.data属性

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

3.本地应用

1.内容绑定，事件绑定

v-text,v-html,v-on基础

v-text : 设置标签的内容，默认替换全部内容，部分替换使用两个大括号的写法，只会解析为文本

<div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2>我爱看{{ message + "!" }}</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"赘婿"
	}
})

v-html : 设置元素的innerHTML，内容中有html结构会被解析为标签

<div id="app">
	<p v-html="content"></p>
    <p v-text="content"></p>
</div>

var app = new Vue({
	el:"#app",
	data:{
		content:"<a href='http://www.zhuixu.com'>赘婿</a>"
	}
})

v-on : 为元素绑定事件，事件名不需要写on，指令可以编写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据

<div id="app">
	<input type="button" value="v-on指令" v-on:click="do">
    <input type="button" value="v-on简写" @click="do">
    <input type="button" value="双击事件" @dblclick="do">
    <h2 @click="changeVedio">{{ vedio }}</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		vedio:"香蜜沉沉烬如霜"
	},
	methods: {
		do:function(){
			alert("我爱看赘婿");
		},
		changeVedio:function(){
			this.vedio+="好好看！";
		}
	}
})

2.显示切换，属性绑定

v-show,v-if,v-bind

v-show : 根据真假切换元素的显示状态；实质上是修改元素的display，实现显示隐藏；指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏

<div id="app">
	<input type="button" value="切换显示状态" @click="changeIsShow">
    <img v-show="isShow" src="./img/xxxx.gif" alt="">
</div>

var app = new Vue({
	el:"#app",
	data:{
		isShow:false
	},
	methods: {
		changeIsShow:function(){
			this.isShow = !this.isShow;
		}
	}
})

v-if : 根据表达式的真假切换元素的显示状态；本质是通过操纵dom元素来切换显示状态；表达值的值为true，元素存在于dom树中，为false则从dom树中移除；频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

<div id="app">
	<input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">赘婿真好看</p>
    <h2 v-if="age>=18">终于成年啦！可以看赘婿了</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		isShow:false，
		age:20
	},
	methods: {
		toggleIsShow:function(){
			this.isShow = !this.isShow;
		}
	}
})

v-bind : 为元素绑定属性；完整写法是 v-bind:属性名；简写可以省略 v-bind，只保留 :属性名；动态的增删class建议使用对象的方法

<style>
	.active{
		border: 1px solid red;
	}
</style>

<div id="app">
	<img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
         :class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
         :class="{active:isActive}" @click="toggleActive">
</div>

var app = new Vue({
	el:"#app",
	data:{
		imgSrc:"http://www.xxx.com",
		imgTitle:"赘婿快点更新",
		isActive:false
	},
	methods: {
		toggleActive:function(){
			this.isActive = !this.isActive;
		}
	}
})

3.列表循环，表单元素绑定

v-for,v-on补充,v-model

v-for：根据数据生成列表结构；数组经常和v-for结合使用；语法是(item,index) in 数据或者item in 数据；item和index可以结合其他指令一起使用；数组长度的更新会同步到页面上，是响应式的

<div id="app">
	<input type="button" value="添加数据" @click="add">
	<input type="button" value="移除数据" @click="remove">
	
	<ul>
		<li v-for="(item,index) in arr">
			{{ index+1 }}我爱看的小说：{{ item }}
		</li>
	</ul>
	<h2 v-for="item in vedios" :title="item.name">
		{{ item.name }}
	</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		arr:["盘龙“，”赘婿","星辰变","神墓"],
		vedios:[
			{name:"悬崖"},
			{name:"香蜜沉沉烬如霜"}
		]
	},
	methods:{
		add:function(){
			this.vedios.push({name:"赘婿"});
		},
		remove:function(){
			this.vedios.shift();
		}
	}
})

v-model：便捷的设置和获取表单元素的值；绑定的数据会和表单元素值相关联；绑定的数据<-->表单元素的值

<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>
        {{ message }}
    </h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"我爱看赘婿"
	},
	methods:{
		getM:function(){
			alert(this.message);
		},
		setM:function(){
			this.message="还是爱看赘婿";
		}
	}
})

4.网络应用

axios：axios必须先导入才可以使用；使用get或post方法即可发送对应的请求；then方法中的回调函数会在请求成功或失败时触发；通过回调函数的形参可以获取响应内容，或错误信息。

官方文档：https://github.com/axios/axios

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">

document.querySelector(".get").onclick = function(){
    axios.get("https://xxx.com")
    .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}

document.querySelector(".post").onclick = function(){
    axios.post("https://xxx.com",
              {username:"宁曦"})
    .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}

axios+vue：axios回调函数中的this已经改变，无法访问到data中数据；把this保存起来，回调函数中直接使用保存的this即可；和本地应用最大区别就是改变了数据来源

<div id="app">
    <input type="button" value="获取视频列表" @click="getVedio">
    <p>
        {{ vedio }}
    </p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        vedio:"赘婿"
    },
    methods:{
        getVedio:function(){
            var that = this;
            axios.get("https://xxx.com/getVedio").then(
            function(response){
                console.log(response.data);
                that.vedio = response.data;
            },function(err){})
        }
    }
})