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 。　　

posted @ 2022-07-30 23:57 #谭阅读(76) 评论(0) 编辑收藏举报

刷新页面返回顶部

#谭

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

一、VUE 概述

二、Vue.js

三、Vue.js基础语法

1.模板语法

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

3. 循环语句 v-for

4. 计算属性 computed

5. Vue.js 监听属性

6. 绑定事件

公告

4. 计算属性 computed　