Vue初识
渐进式JavaScript框架
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架的形式完成整个web前端项目
什么是Vue
vue可以独立完成前后端分离式web项目的JavaScript框架
为什么要学习Vue
三大主流框架之一：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为其通过数据
vue完成简单的事件
{ { msg }}这种被两个大括号包住的叫插值表达式 也叫vue变
<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>
转载于
//www.cnblogs.com/zhengyuli/p/11093819.html
本是古典 何须时尚
小灰灰
深藏阁楼爱情的钟
朱雀
还没有评论，来说两句吧...