VUE基础

目录

1.什么是Vue.js

2.Vue的优点

3.Vue安装

4.第一个Vue程序

5.Vue指令

目录

1.什么是Vue.js

2.Vue的优点

3.Vue安装

4.第一个Vue程序

5.Vue指令

6.Vue实例生命周期

---

1.什么是Vue.js

Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三 大主流框架！

2.Vue的优点

• 体积小

• 高效率

• 双向数据绑定,简化Dom操作

• 生态丰富,学习成本低

3.Vue安装

只需要导入<script src="js/v2.6.10/vue.min.js"></script>文件

4.第一个Vue程序

1. 导入开发版本的Vue.js

2. 创建Vue实例对象,设置el属性和data属性

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

<div id="app">{{message}}<div/>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})

代码解析:

{{变量}}模板语法,插值表达式获取数据

new Vue();创建一个Vue对象(VM对象)

el:数据挂载的dom对象

• Vue会管理el选项命中的元素及其内部的后代元素
• 可以使用其他的选择器,但是建议使用ID选择器
• 可以使用其他的闭合标签,不能使用HTML和BODY

data:{message:"hello world"} model数据

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据,如对象,数组

5.Vue指令

v-text	作用是设置标签的文本内容,默认写法会替换全部内容,使用差值表达式可以提高指定内容	<p v-text="message+1"></p> <p>{{message+1}}</p>
v-html	作用是设置元素的innerHTML,内容中有html结构会被解析为标签	<p v-html="message+1">非凡英才</p>
v-on	作用是元素绑定事件,事件名不需要写on指令可以写成@,绑定的方法定义在methods属性中,可以传入自定义参数	<input type="button" value="按钮" v-on:click="test(1,2)" /> <input type="button" value="按钮" @click="test" /> methods:{ test(a,b){ alert(a); } }
v-model	作用的便捷的设置和获取表单元素的值,绑定的数据会和表单的数据值相关联,绑定的数据<--->表单元素的值 双向的数据绑定	<input type="text" v-model="message"/> <p>{{message}}</p> data:{ message:"" }
v- show	作用是根据真假切换元素的显示状态,原理是修改元素的display,实现显示隐藏指令后面的内容,最终都会解释为布尔值为true元素显示,值为false元素隐藏,数据改变之后,对应元素的显示状态会同步更新	data:{ isShow:true, age:20 }
v-if	作用是根据表达式的真假切换元素的显示状态,本质通过操作dom元素来切换,显示状态表达式的值为true,元素存在于dom中,为false,从dom中移出.
v-bind	作用是为元素绑定数据属性,完整写法是v-bind:属性名(:属性名)	<img v-bind:src="imgSrc" /> <img :src="imgSrc" /> <img :title="imgTitle" :src="imgSrc" /> data:{ imgSrc:'img/3.jpg' imgTitle:"这是一张图片" }
v-for	作用是根据数据生成列表结构,数据经常和v-for结合,使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用,数据长度的更新会同步到页面上是响应式的,为循环绑定一个key值,尽可能唯一	<li v-for="item in array"> {{item}}省 </li> <li v-for="(item,index) in array"> {{index+1}}{{item}}省 </li> <li v-for="(item,index) in objects"> {{index+1}}{{item.name}}{{item.age}} </li> data:{ array:['陕西','山西','河南'], objects:[ {name:'admin',age:23}, {name:'jim',age:22} ] }

6.Vue实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板，将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){
console.log('mounteda’);
}