- A+
Vue的优点
- Vue实现了ui和逻辑的绑定:帮助用户自动完成界面和数据的绑定,界面更新或者数据更新都会引发另一方的自动更新,这为开发者节省了很多工作量。平时写的js代码,80%代码是在操作dom树,其实就是通过逻辑数据更新ui,这部分vue帮我们做好了,我们在写前端的时候,再也不用操心这些了。
- 组件式开发:将ui可重用的部分或者逻辑复杂的部分分割出来,单独做成组件,其实这也是一种面向对象的思维,通过独立出组件,降低代码复杂度,实现组件的复用。
挂载点
- <div id ="root"></div>
- <script>
- new Vue({
- el:"#root"
- })
- </script>
该div叫做vue实例的挂载点,可通过id进行vue实例和标签的绑定
插值表达式
- <div id ="root">{{msg}}</div>
- <script>
- new Vue({
- el:"#root",
- data:{
- msg:"hello world!",
- },
- })
- </script>
插值表达式完成数据和标签的单向绑定,数据变化,则标签内容也会跟着改变,少去了以前通过获取标签元素来改变标签内容的繁琐
模板
- <div id ="root">模板区域</div>
- <script>
- new Vue({
- el:"#root",
- template:"<h1>{{msg}}</h1>",
- data:{
- msg:"hello world!",
- },
- })
- </script>
模板中的内容会自动替换挂载点中的内容,如果挂载点中存在其他内容或者标签元素,则会被模板覆盖。模板区域即模板内容,如果vue中没有定义模板,那么会将模板区域中内容解析为vue中的模板内容。挂载点和vue关联时,其实html内容可以被看作为转换为了vue实例。
v-text和v-html
可利用vue中提供的v-text和v-html来显示标签内容
- <div id ="root">
- <div v-text=" content "></div >
- <div v-html=" content "></div >
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- content:'<h1>hello</h1>',
- }
- })
- </script>
v-text直接显示变量内容,v-html通过html语法解析变量内容后再显示
事件绑定
- <div id ="root">
- <div v-on:click="handleclick">{{number}}</div>
- <div @click="handleclick">{{number}}</div>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- number:123
- },
- methods:{
- handleclick:function () {
- this.number = "333"
- }
- }
- })
- </script>
@click是v-on:click的简写,通过在事件绑定函数中修改number变量的值来修改元素标签内容,只要vue中变量更新,挂载点中内容自动更新。
属性绑定
- <div id="root">
- <div v-bind:title="title">hello world</div>
- <div :title="'ddd '+title">hello world</div>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- title:"this is me"
- }
- })
- </script>
Vue中属性绑定语法v-bind,:是缩写,完成div的title属性和vue中的title变量绑定
双向数据绑定
- <div id="root">
- <input v-model = 'content'/>
- <div>{{content}}</div>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- content:"this is content"
- }
- })
- </script>
v-model完成input输入框内容和vue中content变量的双向绑定,input输入框内容改变,同时改变vue中content变量;vue中content变量改变同时改变input输入框内容。
计算属性和侦听器
- <div id="root">
- 姓:<input v-model = "firstname"/>
- 名:<input v-model = "lastname"/>
- <div>{{fullname}}</div>
- <div>{{count}}</div>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- firstname:"",
- lastname:"",
- count:0
- },
- computed:{
- fullname:function () {
- return this.firstname+this.lastname
- }
- },
- watch:{
- firstname:function () {
- this.count++;
- },
- lastname:function () {
- this.count++;
- }
- }
- })
- </script>
计算属性中的函数,只有其依赖是数据发生变化时才会调用,否则,每次使用fullname,其实使用的是缓存值,提高效率。数据变化时,会自动调用侦听器。
v-if、v-show
- <div id="root">
- <div v-if="show">hello world</div>
- <div v-show="show">hello world2</div>
- <button @click="handleclick">toggle</button>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- show:true
- },
- methods:{
- handleclick:function () {
- this.show = !this.show;
- }
- }
- })
- </script>
v-if、v-show属性都可以通过控制属性值为true/false来显隐标签,区别是,如果设置为false,v-if会将div标签从dom树中移除,而v-show只是为div添加了属性style="display: none;"
v-for
- <div id="root">
- <ul>
- <li v-for = "(item,index) of list" :key="index">{{item}} </li>
- </ul>
- </div>
- <script>
- new Vue({
- el:"#root",
- data:{
- list:[1,2,3]
- }
- })
- </script>
v-for属性用于显示list数据,循环list中的数据,并循环创建li标签,item指的list中的元素,index为该元素在list中的索引号
组件
- <div id="root">
- <input v-model = "inputvalue"/>
- <button @click = "handleclick">提交</button>
- <ul>
- <!--<li v-for="(item,index) of list" :key="index">{{item}}</li>-->
- <todo-item2 v-for="(item,index) of list" :key="index" :lgw="item"></todo-item2>
- </ul>
- </div>
- <div id="root2">
- <ul>
- <todo-item2></todo-item2>
- </ul>
- </div>
- <script>
- Vue.component("todo-item1",{
- template:"<li>item</li>"
- });
- var TodoItem = {
- props:['lgw'],
- template:"<li>{{lgw}}</li>"
- };
- new Vue({
- el:"#root2"
- });
- new Vue({
- el:"#root",
- components:{
- 'todo-item2' :TodoItem
- },
- data:{
- inputvalue:"",
- list:[]
- },
- methods:{
- handleclick: function () {
- this.list.push(this.inputvalue);
- this.inputvalue="";
- }
- }
- })
- </script>
Vue提供了组件定制功能,组件即将可以封装起来的功能封装起来,比如li,如果我需要对li进行个性化定制,并且在多处重复使用,那么我可以将其做成组件。Vue可以做成局部组件和全局组件,全局组件指该组件可在vue的所有挂载点中使用,采用Vue.component方法注册;局部组件只能在当前vue的挂载点中使用,其他挂载点无法使用,采用components:{ 'todo-item2' :TodoItem}方式注册。每个组件其实就是一个vue实例,在vue模板中嵌入组件,其实就是在vue实例中嵌入vue实例,每个组件可以使用vue实例的所有功能。
父组件向子组件传值可采用定义属性的方式,如定义的“lgw”属性;子组件向父组件传值,采用发布订阅的方式,如emit,子组件发布,父组件订阅