Vue初识
渐进式JavaScript框架
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架的形式完成整个web前端项目
什么是Vue
vue可以独立完成前后端分离式web项目的JavaScript框架
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
Vue优点
1.单页面：高效
2.虚拟DOM：页面缓存
3.数据的双向绑定：数据是具有监听机制
4.数据驱动：从数据出发，不是从DOM出发
Vue使用
1.下载vue.js：https://vuejs.org/js/vue.js
2.在要使用vue的html页面通过script标签引入
<script src="js/vue.js"></script>
3.在html中书写挂载点的页面结构，用id表示
<div id="app"> <h1>{{h1msg}}</h1> <h2>{{h2msg}}</h2> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', //挂载点
4.在自定义的script标签实例化Vue对象，传入一个大字典
data: { //为挂载点页面结构提供数据
h1msg: 'h1内容',
h2msg: 'h2内容'
}
})
5.在字典中通过 el与挂载点页面结构绑定，data为其通过数据
<body> <div id="app"> <h1 v-on:click="clickAction">h1的内容是{{ msg }}</h1> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg:'内容 ' }, methods:{//为挂载点提供事件 clickAction:function () { alert(123) } } }) </script>
Vue操作页面样式
<body> <div id="app"> <!--只要数据值一样的都是一起被改变--> <p v-on:click="btnClick" v-bind:style="v_style">点击文字颜色变为绿色</p> <div v-on:click="btnredclick" v-bind:style="r_style">点击文字颜色变为红色</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { v_style:{ color:'black' }, r_style:{ color: 'black' } }, methods:{ btnClick:function () { this.v_style.color = 'green'; }, btnredclick:function () { this.r_style.color = 'red' } } }) </script>
只要变量一样的都是一起被改变
1.vue通过 v-* 指令来控制标签
2.vue通过 变量 来驱动页面
文本指令
将data里面的数据能够直接渲染给html页面的指令就是文本指令
<body> <div id="app"> <p>{{ msg1 }}</p> <!--插值表达式就是v-text的简写--> <p v-text="msg2"></p> <!--v-html会解析html代码--> <p v-html="msg3"></p> <!--v-once是限制这个变量只能被操作一次,一旦被赋初始值了就不改变，还需要用插值表达式渲染出来--> <p v-once="msg3" v-on:mouseover="action">{{msg3}}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg1: '**msg1**', msg2: '<b>**msg2**</b>', msg3: '<b>**msg3**</b>', }, methods: { action: function () { //不能直接this.data.msg4直接拿到，需要声明一个变量 this.msg3 = '<i>**msg3**</i>'; } } }) </script>
斗篷指令
页面如果vue没加载成功，现在页面上吧双大括号显示出来，当vue记载成功再渲染，比如cdn加载过来，先把你要加载的东西隐藏掉
事件指令
<body> <div id="app"> <!--v:on:事件名="函数名" 可以简写为@事件名="函数名"--> <p v-on:click="action1">{{ msgs[0] }}</p> <p @click="action2">{{ msgs[1]}}</p> <ul> <!--要区别点击的是哪一个,需要加括号传参--> <li @click="liAction(1)">列表项1</li> <li @click="liAction(2)">列表项2</li> <li @click="liAction(3)">列表项3</li> </ul> <!--鼠标事件的对象 直接写函数名，默认把鼠标事件对象传入，可以获取到x,y轴--> <div @click="func1">func1</div> <!--又要传参又要事件对象就多传一个参数,一旦加了括号就要手动传参，$event代表事件对象--> <div @click="func2($event,'abc')">func2</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs:['11111','22'] }, methods:{ action1:function () { alert(this.msgs[0]) }, action2:function () { alert(this.msgs[1]) }, liAction:function (num,msg) { console.log(num,msg) }, func1:function (ev) { console.log(ev) }, func2:function (ev,msg) { console.log(ev); console.log(msg) } } }) </script>
属性指令
什么是属性：id,class,style等都是属性，用vue绑定属性，将属性内容交给vue处理
语法：v-bind:属性名="变量" v-bind:可以简写为：
一个类名可以控制一群样式，双类名中，变量拿引号括起来就不是变量了
<body> <div id="app"> <p class="" style="" v-bind:owne="oo" :jason="jj"></p> <!--class属性--> <p :class="c1" @click="action1"></p> <!--双类名，变量拿引号括起来就不是变量了--> <p :class="[c1,'br']"></p> <!--style属性--> <!--一个变量：该变量值为{}，{}内部完成一个个属性的设置 推荐这种--> <p class="gDiv" :style="s1">12345</p> <!--一个{}，{}内一个个属性由一个个变量单独控制--> <p class="gDiv" :style="{fontSize:fs,color:c}">123456</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { oo:'Owen', jj:'Jason', c1:'rDiv', c2:'br', s1:{ // 'font_size':'50px' fontSize:'30px', color:'pink' }, fs:'50px', c:'red' }, methods:{ action1:function () { if (this.c1 == 'rDiv'){ this.c1 = 'gDiv' }else{ this.c1 = 'rDiv' } } } }) </script>
表单指令
定义两个input标签同时输入值修改值删除值，实时改变
表单指令：v-model="变量" 双向绑定
<body> <div id="app"> <!--表单指令 v-model="变量"--> <form action=""> <p> <input type="text" v-model="val" name="user"> </p> <p> <input type="text" v-model="val"> </p> <!--单选框 v-model绑定的变量是单选框中某一个input的value--> <p> 男:<input v-model="r_val" value="male" type="radio" name="sex"> 女：<input v-model="r_val" value="female" type="radio" name="sex"> </p> <!--复选框 v-model绑定的变量是一个列表中存放0到任意一个复选框的value --> <p> 男:<input v-model="c_val" value="m" type="checkbox" name="f"> 女：<input v-model="c_val" value="f" type="checkbox" name="f"> </p> <button type="submit">提交</button> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { val:'', r_val: 'male', c_val:['f'] } }) </script>
条件指令
条件指令：v-show 或 v-if
v-show 消失是以display:none 显渲染，占页面结构
v-if 是不被渲染，在内存中，所以建议建立缓存用key属性
<body> <div id="app"> <!--条件指令 v-show 或者 v_if --> <div class="div" v-show="s1"></div> <div class="div" v-show="s1"></div> <div class="div" v-if="s2" key="div1"></div> <div class="div" v-if="s2" key="div2"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { s1:false } }) </script>
点击颜色选项变换颜色，下面可以是个大页面
<meta charset="utf-8"> <style> ul li { border: 1px solid black; width: 60px; float: left; } ul { list-style: none; } ul:after { content: ""; display: block; clear: both; } .wrap { width: 500px; height: 200px; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } </style> <div id="app"> <!-- v-if v-else-if v-else 案例 --> <ul> <li @click="changeWrap(0)">red</li> <li @click="changeWrap(1)">green</li> <li @click="changeWrap(2)">blue</li> </ul> <!-- red页面逻辑结构 --> <div class="wrap red" v-if="tag == 0" key="aaa"></div> <!-- green页面逻辑结构 --> <div class="wrap green" v-else-if="tag == 1" key="bbb"></div> <!-- blue页面逻辑结构 --> <div class="wrap blue" v-else key="ccc"></div> <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 --> <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 --> </div> <script src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { tag: 0, }, methods: { changeWrap (num) { this.tag = num; } } }) </script>
浙公网安备 33010602011771号