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){})
}
}
})
