Vue(1)

2018-10-15 本文已影响0人一颗脑袋

什么是Vue.js?

Vue.js是目前最火的前端框架，而React.js是当下最流行的前端框架，我们可以使用React.js进行网站开发和手机App开发，而Vue借助Weex也能实现手机App开发。而Vue.js相较于React.js来说更易入门。
三大前端主流框架之一（Angular.js | React.js | Vue.js）
Vue.js主要是用于构建用户界面的框架，所以只关注视图层。

学习框架的好处

能显著地提高开发效率。

发展历程：
原生js（兼容性问题麻烦） --> Jquery之类的js库（极大程度解决兼容性问题，并提供了方便使用的新方法） --> 前端模板引擎（封装一些常用的模板以供调用，但渲染效率低） --> Vue.js等前端框架（减少不必要的DOM操作，从而将精力放在业务逻辑上；提高渲染效率；一些新概念新思想）。

MVC和MVCC的关系

MVC一般是后端的一种开发思想，MVC分别代表Model（模型）、View（视图）和Controller（控制），用户通过前端交互可以对数据库进行操作，这个过程可以看做：在View层进行交互 --> 在Controller层处理业务逻辑 --> 在Model层对数据库进行CRUD。
而MVVM是前端页面的一种开发思想，和MVC类似，我们只是把C换成了VM。一般来说，MVVM分层开发思想是将每个页面分成了M、V、VM三个层，VM是M层和V层的调度者，也是MVVM思想的核心层。
M层一般保存着每个页面中单独的数据；
V层即HTML代码结构；
VM层是两者之间的调度者，实现了M层向V层存取数据和V层向M层存取数据，即实现了数据的双向绑定。

使用Vue.js输出hello

Vue.js的安装十分简单，我们只需要引入外部js文件即可。我们直接看代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<title>Hello Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>这是我要说的：{{msg}}</p>
  </div>
</body>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        msg: "hello Vue."
      }
    });
  </script>
</html>

这是最基本的Vue.js的使用，Vue.js为我们提供了Vue这个对象，我们可以进行实例化，而参数el为elemnt的缩写，表示Vue实例绑定的页面元素，而data中我们可以存放一些我们需要使用的数据。
结合MVVM架构，我们可以发现Vue对象的实例vm即VM层，实现了数据的双向绑定，V层即id为app的<div>，M层即vm中的data对象，存储着页面需要使用到的数据。

v-指令

v-cloak：无表达式，直接挂载。cloak有斗篷、隐藏的意思，作用是在也页面编译完成之前让元素保持display:none的属性。需要在css中加：

[v-cloak] {
    display: none;
}

这样，页面就不会因为先加载后编译出现的闪烁效果。

v-text：表达式：v-text = "str"。这个指令改变了元素的textContent，下面两条语句的效果是一样的：

<span v-text="message"></span> //等价于下面的语句
<span>{{message}}</span>

v-html：表达式：v-html = "str"。类似jquery的html(str)。

//假设message = "<h1>Hello</h1>";
<div v-text="message"></div> //div中显示：<h1>Hello</h1>
<div v-html="message"></div> //div中显示：Hello，和Hello被<h1>标签包裹。

v-bind：为元素绑定属性并赋值。
- 缩写形式：：

<div v-bind:title="message+'其他内容'"></div>//可以使用message变量+表达式的形式赋值给属性title。

v-on：为元素绑定一个或多个事件。
- 缩写：@
- 预期：function || inline statement || Object
- 参数：event
- 修饰符：
- 示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--方法处理器-->
        <button v-on:click="show">方法处理器</button><br/>
        <!--内联语句-->
        <button v-on:click="change('message is changed')">内联语句</button><br/>
        <!--  串联修饰符 -->
        <button @click.stop.prevent="show">串联修饰符</button><br/>
        <!-- 键修饰符，键别名 -->
        <input @keyup.enter="onEnter"><br/>
        <!-- 键修饰符，键代码 -->
        <input @keyup.13="onEnter"><br/>
        <!-- 点击回调只会触发一次 -->
        <button v-on:click.once="show">只会触发一次</button><br/>
        <!-- 对象语法 (2.4.0+)：不能执行内联语句 -->
        <button v-on="{ click: change, mouseleave: show }">对象语法</button><br/>
        <!--绑定多事件-->
        <button @click="change('hello')" @mouseleave="show">多事件</button>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                message: "This is a message."
            },
            methods: {
                show: function(){
                    alert(this.message);
                },
                change: function(text){
                    this.message = text;
                },
                onEnter: function(){
                    alert("onEnter is run");
                }
            }
        });
    </script>
</body>
</html>

练习：跑马灯效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="run">浪起来</button>
        <button @click="stop">低调</button>
        <div>{{message}}</div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                message: "猥琐发育！别浪~~~",
                interval: null
            },
            methods: {
                run: function(){
                    if(!this.interval){
                        var _this = this;//这里可以使用箭头函数解决this指向问题
                        this.interval = window.setInterval(function(){
                            var arrStr = _this.message.split("");
                            var str = arrStr.shift();
                            arrStr.push(str);
                            _this.message = arrStr.join("");
                        },400);
                    }
                },
                stop(){
                    window.clearInterval(this.interval);//这里interval会赋值为数字
                    this.interval =  null;
                }
            }
        });
    </script>
</body>
</html>

v-model实现表单元素的双向数据绑定

目前Vue.js只有v-model才是真正地数据双向绑定，即在页面修改数据同样能动态改变数据的值。
比如：

<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--使用v-bind动态显示message-->
        <input type="text" v-bind:value="message1">
        <span>{{message1}}</span>
        <br/>
        <!--使用v-model进行表单数据绑定-->
        <input type="text" v-model="message2">
        <span>{{message2}}</span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                message1: "this is message1!",
                message2: "this is message2!"
            }
        });
    </script>
</body>
</html>

v-bind:value和v-model的区别在于，v-model能通过表单数据的改变来更新绑定的数据值，实现双向绑定。

练习：使用双向绑定的特点来实现简单的计算器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1" @input="calc">
        <select v-model="opt" @change="calc">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2" @input="calc">
        <button @click="calc">=</button>
        <input type="text" v-model="result" style="color: red;">
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                n1: 0,
                opt: "+",
                n2: 0,
                result: 0
            },
            methods: {
                calc(){
                    var str = "parseFloat('"+this.n1+"') "+this.opt+" parseFloat('"+this.n2+"')";
                    this.result = window.eval(str);
                }
            }
        });
    </script>
</body>
</html>

使用v-bind设置元素class和style

一般使用数组或对象来绑定，直接看实例即可：

class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style type="text/css">
        .red{
            color: #abc;
        }
        .italic{
            font-style: italic;
        }
        .larg{
            font-size: 3em;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>规则，就是用来打破的(无style)</h1>
        <!--原生class写法-->
        <h1 class="red italic larg">规则，就是用来打破的</h1>
        <!--v-bind场景一:使用数组-->
        <h1 :class="['red','italic','larg']">规则，就是用来打破的</h1>
        <!--场景二：使用三元表达式-->
        <h1 :class="['red','italic',flag?'larg':'']">规则，就是用来打破的</h1>
        <!--场景三：使用数组对象-->
        <h1 :class="['red','italic',{larg:flag}]">规则，就是用来打破的</h1>
        <!--场景四：直接使用对象-->
        <h1 :class="{red:false, italic:true, larg:true}">规则，就是用来打破的</h1>
        <!--动态绑定-->
        <h1 :class="app_class">规则，就是用来打破的</h1>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false,
                app_class: {red:true, italic:false, larg:true}
            }
        });
    </script>
</body>
</html>

style

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--原生写法-->
        <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1>
        <!--使用对象-->
        <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1>
        <!--使用数组-->
        <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1>
        <!--动态绑定-->
        <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false,
                sty1: {color:'#aa9800','font-style':'30px'},
                sty2: {'font-style':'italic'}

            }
        });
    </script>
</body>
</html>

使用v-for进行迭代

使用v-for可迭代数组、数组对象、对象以及数字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--迭代数组-->
        <hr>
        <p v-for="(val,index) in arr">索引：{{index}};值：{{val}}</p>
        <!--迭代数组对象-->
        <hr>
        <p v-for="(val,index) in arr2">索引:{{index}};值：{{val.id}}={{val.name}}</p>
        <!--迭代对象-->
        <hr>
        <p v-for="(val,key,index) in obj">索引:{{index}};键：{{key}};值：{{val}}</p>
        <!--迭代数字-->
        <hr>
        <p v-for="val in 5">{{val}}</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                arr: ['a','b','c','d','e'],
                arr2: [{id: '1', name:'Tom'},{id: '2', name: 'Json'}],
                obj: {id: '1',age:24,name: 'Micle'}
            }
        });
    </script>
</body>
</html>

使用v-for时key的注意事项
在组件中使用v-for时必须使用key属性，以标识迭代元素的唯一性。注意：key使用v-bind进行绑定，且值必须为字符串或数字。

v-if和v-show的使用

两者的值都是布尔值，根据传入的boolean来决定是否“显示”该元素。
v-if和v-show的区别在于，如果传入的值为true，前者才创建该元素否则不创建；而后者使用“display:none”来控制元素的显示效果，所以一定会创建出来。
所以，

v-if：切换显示效果的渲染成本高。
v-show：首次创建元素的渲染成本高。
即，v-if通过删除或新建元素来显示元素；而v-show先创建元素再通过display:none来控制显示效果。根据实际情况选择使用。

案例

........