vue基础之关于强制绑定

vue基础之关于强制绑定

描述及特点

描述：
Vue是渐进式JavaScript框架，用于动态构建用户界面。
特点：
遵循MVVM模式，编码简介，体积小，运行效率高，适合移动/pc端开发，它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目。

引入vue的基本使用

1.引入vue.js库
2.创建Vue对象：其中el指定根element（选择器），data进行初始化数据即页面可以访问的数据操作。
3.v-model实现双向数据绑定
4.使用{{xxx}}实现数据的显示

   <!--模板--><div id="app"><input type="text" v-model="username"><div>Hello {{username}}</div><p v-text="username"></p></div><!--引入vue.js-->
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var vue = new Vue({ //实例化对象，配置对象 options//配置选项（option）el:'#app', //element：指定用vue来管理页面中的那个标签区域data:{username:'World'}})
</script>	

模板语法

理解：模板就是动态的HTML页面，包含了一些js语法代码，包括双括号表达式和以v-开头的自定义标签属性的指令。

1.双大括号表达式：{{exp}}
双大括号表达式用于向页面输出数据，可以调用对象的方法。

<!--双大括号表达式--><div id="app"><h1>双大括号表示</h1><p>{{username}}</p><p v-text="username"></p></div>       
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var vue = new Vue({el:'#app',data:{username:'hello world',},})
</script>

2.强制数据绑定：v-bind:xxx = ‘yyy’，简写: :xxx = ‘yyy’
可以指定变化的属性值。

 <div id="app">
<h1>强制数据绑定</h1><img v-bind:src="url" alt=""><img :src="url" alt=""></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var vue = new Vue({el:'#app',data:{url:'.png'},})
</script>

3.绑定事件监听：v-on:click=‘xxx’，简写：@click=‘xxx’
可用于绑定指定事件名的回调函数

 <div id="app"><h1>绑定事件监听</h1><button v-on:click="test">点击我</button><button @click="test2('hello')">点击我</button></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var vue = new Vue({el:'#app',data:{},methods:{test(){alert('hahaha')},test2(content){alert(content)}}})
</script>

计算属性和监视

1.计算属性：computed
在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算结果。
2.监视属性：watch或$watch()
通过vue对象的￥watch()或watch配置来监视指定的属性，当属性变化是，回调函数自动调用，在函数内部进行计算。
3.计算高级属性：set()，get()
通过getter/setter实现对睡醒数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。

 <div id="app">姓：<input type="text" placeholder="FirstName" v-model="firstName"> <br>名：<input type="text" placeholder="LastName" v-model="lastName"> <br>姓名1（单向）：<input type="text" placeholder="FullName1" v-model="fullName1"> <br>姓名2（单向）：<input type="text" placeholder="FullName2" v-model="fullName2"> <br>姓名3（双向）：<input type="text" placeholder="FullName3" v-model="fullName3"> <br></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var vue = new Vue({el:'#app',data:{firstName:'A',lastName:'B',fullName2:'A B'},/** 计算属性：单向数据改变* 在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算结果* */computed:{fullName1(){return this.firstName + ' ' + this.lastName},/** 计算属性高级：双向数据改变* 通过getter/setter实现对属性数据的显示和监视* 计算属性存在缓存，多次读取只执行一次getter计算* getter：对应属性的get()方法* setter：对应属性的set()方法* */fullName3:{//get()当获取当前属性值时自动调用，将返回值作为属性值get(){return this.firstName + ' ' + this.lastName},//set()监视数据变化，当属性值发生了改变时自动调用，监视当前属性值变化，同步更新相关的其他属性值set(value){console.log(value)var names = value.split(' ')console.log(names)this.firstName = names[0]this.lastName = names[1]}}},/** 监视：单向数据改变* 通过vue对象的$watch()或watch配置来监视指定的属性* 当属性变化时，回调函数自动调用，在函数内部进行计算* */watch:{firstName:function (newValue,oldValue){this.fullName2 = newValue + ' ' + this.lastName}}})vue.$watch('lastName',function (newValue,oldValue){this.fullName2 = this.firstName + ' ' + newValue})</script>

class/style强制样式绑定

在应用界面中，某些元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术。
1.class绑定： ：class = ‘xxx’
2.style绑定 ：style= “{color,fontSize}”

<style>.a{color: rebeccapurple;}.b{color:darkorange;}.c{font-size: 20px;}</style><div id="app"><h1>class强制绑定</h1><p :class="classA" class="c">表达式是字符串:'xxx'</p><p :class="{a:isA,b:isB}">表达式是对象：{classA:isA,classB:isB}</p><p :class="['a','c']">表达式是数组：[‘classA’，‘classB’]</p><h2>style强制绑定样式</h2><p :style="{color,fontSize}">style绑定样式：：style=“{color,fontSize}”</p><button @click="update">更新样式</button></div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>var vue = new Vue({el:'#app',data:{classA:'a',classB:'b',isA:true,isB:false,color:'green',fontSize:'20px'},methods:{update(){this.classA = 'b'this.isA = falsethis.isB = lor = 'blue'this.fontSize = '30px'}}})
</script>

条件渲染

条件渲染指令：v-if，v-else和v-show
如果需要频繁切换，使用v-show较好，当条件不成立是，v-if的所有子节点不会解析。

<style>.a{color: deeppink;font-size: 20px;}.b {color:green;}</style><div id="app"><h1>v-if/v-else</h1><h4 :class="classA" v-if="ok">表白成功</h4><h4 :class="classB" v-else="!ok">求婚失败</h4><button @click="ok = !ok">切换</button><h1>v-show</h1><h4 :class="classB" v-show="option">踢足球</h4><h4 :class="classA" v-show = '!option'>弹吉他</h4><button @click="option = !option">切换</button></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>var vue = new Vue({el:'#app',data:{ok:true,classA : 'a',classB :'b' ,option: true},})
</script>