vue学习笔记：vue.js基础语法

一、VUE 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
注意：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

二、Vue.js

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

按照惯例，先来一个 Hello,World!

<html>

<head>

    <meta charset="UTF-8">

    <title>test01</title>

</head>

<body>

    <!-- view层 模板 -->

    <div id="app"> {{message}} </div>

    <!-- 1.导入Vue.js -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        // 创建一个Vue 对象实例

        var vm = new Vue({

            //viewModel 实现与Model双向绑定，动态更新视图数据

            el: "#app", //绑定元素的ID

            // Model: 数据

            data: {

                message: "Hello,World!" // 定义一个名为 message 的属性，并设置了初始值

            }

        });

    </script>

</body>

</html>

三、Vue.js基础语法

1.模板语法

在数据绑定时使用的 {{}}（双大括号），即：插值表达式。
代码如下：

<div id="app">

 {{message}}

</div>

如果想要输出 html 代码，使用 v-html 。
代码如下：

<div id="app">

        <div v-html="message"></div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        new Vue({

            el: "#app",

            data: {

                message: '<h1>TanYongJun</h1>'

            }

        });

    </script>

html 属性中的值，使用 v-bind 绑定
代码如下：

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .testClass{

            color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <div v-bind:class="{'testClass':use}">

            <label>v-bind 绑定属性值</label>

        </div>

        <br>

        <!--<a v-bind:href="url">v-bind 完整语法 </a>-->

        <br>

        <!--<a :href="url"> v-bind 简写 </a>-->

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app =  new Vue({

            el: "#app",

            data: {

                use:true,

                url:'www.baidu.com'

            }

        });

    </script>

</body>

</html>

Vue.js 支持JavaScript 表达式。代码如下：

<div id="app">

        {{5+5}}<br>

        {{ ok ? 'YES' : 'NO' }}<br>

        {{ message.split('').reverse().join('') }}

        <div :id="'list-' + id">测试</div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                ok: true,

                message: 'tanyongjun',

                id : 1

            }

        });

    </script>

Vue.js 允许自定义过滤器，用作一些常见的文本格式化。
代码如下：

 <div id="app">

        <!-- 对输入的字符串第一个字母转为大写 -->

        <!-- 过滤器 在两个大括号中使用 -->

        {{ message | capitalize }}

        <!-- 过滤器 在 v-bind 指令中使用 -->

        <!--<div v-bind:id="rawId | formatId"></div> -->

      </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                message: 'tanyongjun'

            },

            filters:{

                capitalize:function(value){

                    if(!value) return '';

                    value = value.toString();

                    return value.charAt(0).toUpperCase() + value.slice(1);

                }

            }

        });

    </script>

过滤器可以串联，例如：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

Vue.js 中可以使用 v-model 来实现双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">

    <p>{{ message }}</p>

    <input v-model="message">

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'tanyongjun'

  }

})

</script>

2. 条件语句 v-if & v-else

<div id="app">

        <h1 v-if="type=='A'">A</h1>

        <h1 v-else-if="type=='B'">B</h1>

        <h1 v-else>C</h1>

      </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var vm = new Vue({

            el: "#app",

            data: {

                type: 'A'

            },

        });

    </script>

3. 循环语句 v-for

<div id="app">

        <ol>

            <li v-for="todo in todos">

              {{ todo.text }}

            </li>

          </ol>

      </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        new Vue({

            el: "#app",

            data: {

                todos: [

                    { text: 'tan' },

                    { text: 'yong' },

                    { text: 'jun' }

                ]

            }

        });

    </script>

4. 计算属性 computed　

<div id="app">

        <p>原始字符串: {{ message }}</p>

        <p>计算后反转字符串: {{ reversedMessage }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                message: 'tanyongjun'

            },

            computed: {

                // 计算属性的 getter

                reversedMessage: function () {

                // this 指向 app 实例

                return this.message.split('').reverse().join('')

                }

            }

        });

    </script>

上面的示例中声明了一个计算属性 reversedMessage 。提供的函数将用作属性 app.reversedMessage 的 getter 。
app.reversedMessage 依赖于 app.message，在 app.message 发生改变时，app.reversedMessage 也会更新。
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed 属性默认只有 getter ，不过在需要时也可以提供一个 setter ：
代码如下：

<div id="app">

        <p>原始字符串: {{ message }}</p>

        <p>计算后反转字符串: {{ reversedMessage }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                message: 'tanyongjun'

            },

            computed: {

                // 计算属性的 getter

                reversedMessage: function () {

                // this 指向 app 实例

                return this.message.split('').reverse().join('')

                },

                // setter

                set: function (newValue) {

                    var names = newValue.split(' ')

                    this.name = names[0]

                    this.url = names[names.length - 1]

                }

            }

        });

    </script>

5. Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

<div id="app">

        千米 : <input type = "text" v-model = "kilometers">

        米 : <input type = "text" v-model = "meters">

        <p id="info"></p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                kilometers : 0,

                meters:0

            },

            watch : {

                kilometers:function(val) {

                    this.kilometers = val;

                    this.meters = this.kilometers * 1000

                },

                meters : function (val) {

                    this.kilometers = val/ 1000;

                    this.meters = val;

                }

            }

        });

        app.$watch('kilometers', function (newValue, oldValue) {

            // 这个回调将在 app.kilometers 改变后调用

            document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;

        })

    </script>

上面的代码实现了千米与米之间的换算。两个输入框用来接收用户输入的值，在 data 属性中把 kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。当输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

6. 绑定事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app">

        <button v-on:click="sayHi">点我</button>

        <!-- 简写 -->

        <button @click="sayHi">点我（简写方式）</button>

      </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

            },

            methods: {  //方法必须定义在Vue的methods对象中

                sayHi: function () {

                    alert('Hello');

                }

            }

        });

    </script>

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，Vue.js通过由点 "." 表示的指令后缀来调用修饰符。
例如：　

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- click 事件只能点击一次，2.1.4版本新增 -->

<a v-on:click.once="doThis"></a>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
例如：

<!-- 只有在 keyCode 是 13 时调用 -->

<input v-on:keyup.13="submit">

为了方便使用，Vue 为最常用的按键提供了别名：　　

<!-- 同上 -->

<input v-on:keyup.enter="submit">

全部的按键别名： .enter 、.tab 、 .delete (捕获 "删除" 和 "退格" 键) 、.esc 、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta 。　　