Vue.js 基础知识总结篇1

Vue.js 基础知识总结篇1

• 导读
  • VUE.JS 是什么？
  • 模版语法：插值、指令、缩写
  • 计算缓存与 Methods
  • 计算属性与侦听属性
  • Class 与 Style 绑定
  • 条件渲染
  • 列表渲染
  • 数据交互

一. VUE.JS 是什么？

• Vue.js 是一套构建用户界面的渐进式框架。

  • Vue.js 是一款极简的 MVVM 框架

  • Vue 不支持 IE8 及以下版本

  • 尤雨溪是 Vue.js 框架的作者，2014 年 2 月，开源了一个前端开发库Vue.js。

  • 2016 年 9 月 3 日，Vue作者尤雨溪正式宣布以技术顾问的身份加盟阿里巴巴 Weex 团队。

• MVVM框架（MVVM 把代码分了三层，可以进行数据的双向绑定）

  • M 模型层（就是用来保存数据）
  • V 视图层 （显示 HTML 的内容，渲染到页面上的内容）
  • VM 视图模型层（ Vue 这个框架）用来连接M与V这两层

• 数据的双向绑定

  • 当 M 层发生变化，通过 VM 层，让 V 层自动更新
  • 当 V 层发生变化，通过 VM 层，让 M 层自动更新
  • 双向数据绑定是数据与视图 双向绑定，数据发生改变时，视图也改变，视图发生改变时，数据也会发生改变。

• es5 的 Object.defineProperty()

    <span id="span1"></span>
    
    <script>
    var obj = {a : 1}    
    // 观测obj对象下a这个属性
    Object.defineProperty(obj, "a", {
        set(newVal){  // 当obj.a被设置时，自动执行的函数
            console.log('set:', newVal)
            span1.innerHTML = newVal; // 数据驱动
        },
        get(){  // 当obj.a被获取时，自动执行的函数
            console.log('get');
            return 123
        }
    });
    </script>

Vue 为什么能实现数据驱动，原因就是因为Vue的框架使用了 es5 的 Object.defineProperty() 函数,观测了数据，当数据发生了变化的时候，会自动的执行一些代码。如：让 span 和 obj 的关联，当 set 函数执行的时候，span中的内容变成 obj 中 a 的内容。

• Vue 常见的两种使用方法：
  • 1，直接通过 script 标签引入 vue 文件。
  • 2，通过 webpack 引入 vue 文件。

模版语法：插值、指令、缩写

• 1.数据驱动：当改变数据时，视图会自动更新。如：在控制台输入 vm.a = “你好”；页面内容会显示为 “你好” 的字样。

<div id="app">
    {{ message }}
</div>
<script>
var app = new Vue({
    el: '#app',
    data() {
       return{
            message: 'Hello Vue!';
       }
    }
})
</script>

• 2.模板语法：

元素属性：	

	<div v-bind:title="message">hello</div>

v-bind 指令：
	
	v-bind指把div中的title属性与vue中message属性绑定在一起。
	v-bind:title="message" 可以简写为 :title="message",写代码时，尽量用简写。

插值： 
	<span>Message: {{ msg }}</span>

v-once 指令:
    仅执行1次更新
    <span v-once>{{ msg }}</span>

显示：
	 <p v-text="message"></p>	<p v-html="message"></p>

JS：
	{{ number + 1 }}
	{{ ok ? 'YES' : 'NO' }}
	{{ message.split('').reverse().join('') }}
	<div v-bind:id="'list-' + id"></div>

v-model,计算属性与侦听属性

• v-model
  一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突。
  v-model 实现视图层发生变化时，数据也发生变化。例如下列代码，当输入的 a 和 b 的值发生变化时，c 的值也会被计算出来，并自动显示。

    <div id="app">
        <input type="text" v-model="a" />
        +
        <input type="text" v-model="b" />
        =
        {{c}}
    </div>

    <script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                a : 1,
                b : 2
            }
        },
        computed:{
            c(){
                return Number(this.a) + Number(this.b);
            }
        }
    })
    </script>

• 计算属性 computed：{}
  computed 是一个对象，里面对象是一个函数。
  视图层中，调用的时候，直接写计算属性的属性名，不要加（）。

computed:{
            c(){
                return Number(this.a) + Number(this.b);
            }
        }

• 计算属性的 setter 和 getter
  当计算属性的值被更改的时候 set 才会执行。 默认会执行 get ,获取的时候会执行 get 。

 computed:{
            c : {
                get(){
                    console.log('get');
                    return this.a+this.b;
                },
                set(v){
                    console.log('set:', v)
                }
            }
        }

• method 方法

{{d()}}

method:{
 d(){
    console.log('d 执行了');
    return Number(this.a) + Number(this.b);
    },
}

推荐用计算属性 (因为计算属性有缓存),不推荐用方法
执行 vm.str=“abc” 时，这段代码与d()没有任何关系，但是d（）被执行了，意味着只要视图发生变化，methods中方法都会被执行

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

• 计算属性缓存
  计算属性缓存可以使性能消耗降低。

• 侦听属性

watch:{
            a(v){
                this.c = Number(this.b) + Number(v);
            },
            b(v){
                this.c = Number(this.a) + Number(v);
            }
        }

• class 与 style

• class
  v-bind 绑定属性 class ，给 class 赋值 ，“abc” 为 data 中的一个变量。

<style>
   .xyz{
       background:pink;
   }
   .abc{
       background:pink;
   }
</style>

<div id="app">
   	 <div v-bind:class="abc"></div>
   </div>
   <script>	
   var app = new Vue({    
   	el: '#app',
   	data: { abc:"xyz" }
   }})    
   </script>

添加多个class 属性
对象的写法

<div id="app">
   	 <div v-bind:class="classObj"></div>
   </div>
   <script>	
   var app = new Vue({    
   	el: '#app',
   	data: { 
           
   		classObj:{ "xyz":true, "abc":false } 
   	}
   }})    
   </script>

数组的写法：

<div :class="[a,b]">123</div> 
   data: {	a : "x",	b : "y" } 

   <div :class="classArr">123</div>	 
   data: {	classArr : ["a", "b-c"] }

• style
  绑定一个 style ，值为一个对象。

<div :style="{background:a,'font-size':c+'px'}">123</div> 
	data: { a:'blue', c:100 } 

	<div :style="classObj">123</div> 	 
	data: { classObj: { background:'yellow', 'font-size':'50px'} }

	<div :style="[a, b]">123</div>
	data: { a:{background:'yellow'}, b:{color:'orange'} }

	<div :style="classArr">123</div>
	data: { classArr: [{background:'red'}, {color:'green'}] }

• 条件渲染 v-if 和 v-show

• v-if
  v-if 和 v-else-if 、v-else 搭配使用。

	<p v-if="bln">现在你看到我了</p>
	<p v-else-if="bln===3">现在你看到我了</p>
	<p v-else>现在你看到我了</p>

一个小小的案例，做一个切换按钮，点击按钮，实现添加和删除 div 盒子的效果。bln : true 时，添加 div; bln : false 时，删除 div。

    <style>
        .a{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
    <div id="app">
        <input type="button" value="toggle" @click="handle" />
        <div class="a" v-if="bln">hello</div>
    </div>

    <script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                bln : true
            }
        },
        methods:{
            handle(){
                this.bln = !this.bln;
            }
        }
    })
    </script>

• 在 元素上使用 v-if 条件渲染分组
  因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

• 用 key 管理可复用的元素
  Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。

• v-show
  v-show 只是简单地切换元素的 CSS 属性 display。
  bln：true 时显示， bln：false 时隐藏。隐藏时给节点添加一个display的属性，不会直接删除节点。和v-if 的区别就在于，v-if值为false 时，会直接删除节点， v-show 不会删除节点。

注意，v-show 不支持 元素，也不支持 v-else。

<li v-show="bln">你能看到我吗？</li>

• v-show 和 v-if的区别
  文档中的解释：
  v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• 列表渲染 v-for
  对数据进行循环操作，循环后把一些数据显示在页面上，数组和对象可以进行列表渲染。数组用得最多。

    <div id="app">
       <input type="text" v-model="str" />
       <input type="button" @click="fn" />

       <li v-for="(val, ind) in arr">
           {{val + ' ------- ' + ind }}
           <input type="button" value="删除" />
       </li>
    </div>

    <script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                str : "",
                arr : [
                    "a", "b", "c", "d"
                ]
            }
        },
        methods:{
            fn(){
                this.arr.push(  this.str );
            }
        }
    })
    </script>

关于 v-for 更详细介绍，见 https://cn.vuejs.org/v2/guide/list.html