vue入门

一、初始Vue

初始Vue
第一步：给Vue准备一个容器：

<div id="app">

<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
第二步：创建Vue实例：

// 不允许 vue-devtools 检查代码
Vue.config.devtools = false
// vue 在启动时不显示生产提示
Vue.config.productionTip = false

// 初始化一个Vue实例，在创建Vue实例时，需要给Vue传递一个配置选项，该配置选项是一个对象
let vm = new Vue({
// el选项，指定当前Vue实例，操作的容器
el:'#app',
// data选项，用于存储当前Vue实例管理的数据
// data选项里面管理的数据，会被添加到Vue实例身上，这里就是vm身上。
// data选项里面管理的数据，其实会被Vue实例身上的_data进行代理；并将代理过后的数据再添加到Vue实例身上，方便直接调用。
data:{
name:'王瑞',
age:20
}
})

Vue的响应式原理
// 代理对象的基本理解：
/* let data = {
name:'兵哥',
age:18
}
// 因为对象是引用类型，在传递时，传的是地址
let _data = data;
// 操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。
_data.name = '王瑞'
_data.age = 30
console.log(data); */
console.log('-------------------------------');

// 如何给对象添加成员
let obj = {}
// 方式1：对象名.属性的方式，给对象添加成员
obj.name = '吴亦凡'
// 方式2：对象名['属性名']的方式，给对象添加成员
obj['age'] = 30
// 方式3：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
// 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
// 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
// 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
Object.defineProperty(obj,'sex',{
// 属性值
value:'男',
// 属性允许被删除
configurable:true,
// 属性允许被枚举
enumerable:true
})
// 遍历出对象的所有属性名称
for(let key in obj){
console.log(key);
}

// delete关键字，用于删除对象身上的指定成员
delete obj.name
delete obj.sex
console.log(obj);
console.log('-------------------------------');

// 那么Vue的响应式原理，就用到了Object.defineProperty,给代理对象添加属性。
// 01.我们先定义一份原始数据，也就是被代理对象。
let data = {
name:'兵哥',
age:18
}
// 02.再定义一个空的代理对象
let _data = {}
// 03.使用Object.defineProperty给代理对象添加属性
Object.defineProperty(_data,'name',{
// get方法，用于返回属性的值，当使用到_data对象里面的name属性获取值时，就会执行get方法
get(){
return data.name
},
// set方法，用于设置属性的值，当使用到_data对象里面的name属性并给它赋值时，就会调用set方法
set(val){
data.name = val
// 当监听到数据发生变化时，重新渲染DOM
readerDOM()
}
})
Object.defineProperty(_data,'age',{
get(){
return data.age
},
set(val){
data.age = val
readerDOM()
}
})

// 渲染DOM更新的方法
function readerDOM(){
document.getElementById("name").innerHTML = data.name
document.getElementById("age").innerHTML = data.age
}
readerDOM()

Vue的常用指令
<div id="app">

<h2>{{name}}</h2>

<input type="text" v-bind:value="name" v-on:input="setName">

<h2>{{address}}</h2>

<input type="text" :value="address" @input="address=$event.target.value">

<h2>{{hobby}}</h2> <input type="text" v-model="hobby">
</div>
// 实例化一个Vue对象
let vm = new Vue({
el:'#app',
// data选项，可以是一个对象，也可以是一个方法，由方法返回一对象。
data() {
return {
name:'兵哥',
address:'南京',
hobby:'敲代码'
}
},
// methods选项，里面定义的是Vue管理的方法
methods: {
// 该方法更新name属性值
// 注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。
setName(e){
this.name = e.target.value
},
},
})
条件渲染和列表渲染
<div id="app">

<button v-on:click="isShow=!isShow">显示/隐藏</button>

<div class="box" v-if="isShow">
v-if
</div>

<div class="box" v-show="isShow">v-show</div>

<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>

<ul>

<li v-for="(item,index) in goodses" v-bind:key="index">
{{item.id}}---{{item.name}}---{{item.price}}
<button v-on:click="delGoods(index)">删除</button>
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
// 该属性，用于表示是否显示
isShow:true,
// 定义一个成绩
score:88,
// 定义一个数组
goodses:[
{
id:1001,
name:'乐事薯片',
price:'8元'
},
{
id:1002,
name:'百事可乐',
price:'3元'
},
{
id:1003,
name:'元祖月饼',
price:'10元'
},
{
id:1004,
name:'德芙巧克力',
price:'29元'
}
]
},
methods: {
// 删除商品的方法，将商品的下标通过方法传进来
delGoods(index){
if(confirm('是否确定删除')){
// 再根据数组的下标删除对应的数据
this.goodses.splice(index,1)
}
}
},
})
二、生命周期
小练习
<div id="app">
<button @click="showEdit=true">添加学生</button>

<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in students" :key="index">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="getOne(index)">修改</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>

<div class="edit" v-show="showEdit">

<div class="close" @click="close">X</div>
<div class="item">
<label>学号：</label>
<input type="text" v-model="no">
</div>
<div class="item">
<label>姓名：</label>
<input type="text" v-model="name">
</div>
<div class="item">
<label>年龄：</label>
<input type="text" v-model="age">
</div>
<div class="item">
<label>性别：</label>
<input type="text" v-model="sex">
</div>
<div class="item">
<button @click="add" v-if="updateIndex===-1">添加</button>
<button @click="update" v-else>修改</button>
<button @click="clear">取消</button>
</div>
</div>
</div>
new Vue({
// 指定该Vue实例工作的容器
el:'#app',
// 定义当前Vue实例管理的数据
data:{
// 定义一个学生数组
students:[
{
no:'1001',
name:'张三',
age:20,
sex:'男'
},
{
no:'1002',
name:'李四',
age:22,
sex:'女'
},
{
no:'1003',
name:'王五',
age:24,
sex:'男'
},
{
no:'1004',
name:'赵六',
age:18,
sex:'女'
}
],
// 是否显示编辑窗口
showEdit:false,
// 定义一个学生对象的四个属性
no:'',
name:'',
age:'',
sex:'',
// 定义一个下标，用于表示修改的学生在数组中的位置
updateIndex:-1
},
// 定义当前Vue实例管理的方法
methods: {
// 添加方法
add(){
// 创建一个学生对象
let stu = {
no:this.no,
name:this.name,
age:this.age,
sex:this.sex
}
// 将学生对象添加到学生数组中
this.students.push(stu)
// 调用清空数据的方法
this.clear()
},
// 清空表单数据的方法
clear(){
this.no = ''
this.name = ''
this.age = ''
this.sex = ''
},
// 关闭编辑窗口的方法
close(){
// 隐藏编辑窗口
this.showEdit = false
// 编辑窗口关闭时，重新将修改索引改成-1
this.updateIndex = -1
// 清空表单数据
this.clear()
},
// 删除方法
del(index){
if(confirm('确定删除吗？')){
this.students.splice(index,1)
}
},
// 根据下标从数组中获取对应的学生信息
getOne(index){
// 获取学生对象在数组中对应的下标
this.updateIndex = index
// 显示编辑窗口
this.showEdit = true
// 获取学生
let stu = this.students[index]
// 在编辑窗口中显示该学生信息
this.no = stu.no
this.name = stu.name
this.age = stu.age
this.sex = stu.sex
},
// 修改方法
update(){
// 修改数组中，指定位置学生的信息
let stu = this.students[this.updateIndex]
stu.no = this.no
stu.name = this.name
stu.age = this.age
stu.sex = this.sex
}
},
})
Vue的生命周期
<div id="app">
<button @click="name+='*';age+=1">修改数据</button>
<button @click="over">销毁Vue实例</button>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
let vm = new Vue({
// el选项可以通过 $mount代替 // el:'#app', // 如果有template选项，Vue会将template作为模板进行渲染，并将渲染之后的内容挂载到指定的容器中 // 如果没有template选项，Vue就会将el里面的所有内容当做模板来渲染，并将渲染之后的内容挂载到指定的容器中 /* template:` <div> <p>{{name}}</p> <p>{{age}}</p> </div>`, */ data:{ name:'张三', age:20 }, methods: { over(){ //$ destroy()方法，用于销毁当前Vue实例
// 注意：销毁当前Vue实例，不是删除这个对象，而且这个对象再也不具备响应式页面的能力了。
this. $destroy() } }, // 数据初始化之前 beforeCreate() { console.log('beforeCreate:',this.name,this.age); }, // 数据初始化完成 created() { console.log('created:',this.name,this.age); }, // 页面挂载之前，此时页面是模板 beforeMount() { // 通过$ el返回Vue实例使用的根 DOM 元素
console.log(this. $el); console.log('beforeMount'); }, // 页面挂载完成，此时页面已经渲染完成 mounted() { console.log(this.$ el);
console.log('mounted');
},
// 数据更新之前
beforeUpdate() {
// 在这个阶段，数据已经发生了变化，但是页面还没有重新渲染
console.log('beforeUpdate',this.name,this.age);
},
// 数据更新完成
updated() {
// 在这个阶段，页面会重新渲染
console.log('updated',this.name,this.age);
},
// 销毁之前
beforeDestroy() {
// 我们通常会在这个生命周期函数中做一些收尾的工作
// 比如：停掉开启的定时器，初始化一些数据等等。
console.log('beforeDestroy');
},
// 销毁完成
destroyed() {
console.log('destroyed');
console.log(this);
},
})

setTimeout(() => {
// 通过 $mount方法，给vm指定一个容器 // 这种写法的好处是，可以控制何时挂载页面 vm.$ mount('#app')
}, 1000);

轮播图
<div id="app">

<img :src="imgs[index]">
<ul>
<li v-for="(item,i) in imgs" :class="i===index?'active':''"></li>
</ul>
</div>
new Vue({
el:'#app',
data:{
// 定义轮播图图片数组
imgs:["http://p1.music.126.net/lrd-pX9Azcv2mP8-YnQ3JA==/109951166362109457.jpg?imageView&quality=89",
"http://p1.music.126.net/RXFG298sUeqJlpIGoZvB0Q==/109951166362198241.jpg?imageView&quality=89",
"http://p1.music.126.net/GHcB-WR3T3UhEO5msHXOXg==/109951166362228128.jpg?imageView&quality=89",
"http://p1.music.126.net/Wd08w_8bojR4DWyK7EEkeQ==/109951166362223634.jpg?imageView&quality=89",
"http://p1.music.126.net/y3OQm6kP7nPqRcCBkPRSdQ==/109951166362444141.jpg?imageView&quality=89"],
// 定义索引
index:0,
// 定义一个定时器变量
timer:null
},
methods: {
// 销毁Vue实例的方法
destroy(){
// 当前Vue实例一旦销毁，就不再具体响应页面的能力了
this.$destroy()
}
},
// 在这个阶段，页面已经好了
mounted() {
// 开启一个定时器
this.timer = setInterval(() => {
if(++this.index>=this.imgs.length) this.index = 0
}, 3000);
},
// 在这个阶段，Vue的实例即将销毁
beforeDestroy() {
// 清除定时器
clearInterval(this.timer)
},

vue入门

推荐阅读更多精彩内容