Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

唐宋元明清其

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量167

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Q846169253/article/details/80273853

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 什么是Vue？

Vue 就是数据驱动的渐进式 JavaScript框架。

如何理解数据驱动？其实就是利用数据来渲染页面，数据的改变直接会影响页面的呈现；

如何理解渐进式？其实就是你用Vue 可以只用它最简单的功能，也可以利用组件，按需来用，当你想实现的效果不需要用复杂的组件时，就只用简单声明式渲染即可。

Vue是个MVVM 可以实现视图和数据双向改变传输的功能

2.Vue初步学习：

Vue 模板

<script>  
    var v = new Vue({  
        el :  (挂载点) ,               
       data: （数据，对象，也可以是数组）,  
       method: (方法，可以是数组)  
    })  
</script>

对于methods 如果其中方法仅依赖于data中某些值得变化，则可以用conputed 因为data中其他数据的实现也会使该方法执行浪费时间和性能如

<body>
<div id="root">
<input type="text" v-model="three">
<input type="text" v-model="one">
<input type="text" v-model="two">
{{add}}
{{jian}}
</div>
<script>
   new Vue({
		el:"#root",
		data:{
			one:0,
		    two:0,
		    three:0//改变three的值methods方法会调用
		},
	    /*methods:{add(){
	    	console.log("one");
             return this.one*1+this.two*1
	    },
                 jian(){
                 	console.log("two");
                 	return this.one-this.two
                 }
	    }*/
        computed:{//此方法时调用add和jian时  因为是属性所以不加括号
        	add(){
	    	console.log("one");
             return this.one*1+this.two*1
	    },
            jian(){
                 	console.log("two");
                 	return this.one-this.two
                 }
        }
		})

</script>
</body>

three上数字变换时 methods中add和jian也会执行，而computed中函数不执行

3.todo组件的实现

<body>
<div class="root" style="width:300px;margin: auto">
<todo></todo>
</div>
<script>
    Vue.component("todo",{
        template:`
        <div>
            <input type="text" v-model="val" v-on:keyup.13="up()">
            <ul>
            <li v-for="item in arr">
            {{item}}</li>
            </ul>
        </div>
 `,
    data(){
       return {
        val:"",
        arr:[]
       }
    },
    methods:{
        up(){
           this.arr.push(this.val);
           this.val=""
        }
    }
  })
 new Vue({
        el:".root"
    })