VueJS学习笔记

一、基本用法

1、Vue.js 使用了基于 HTML 的模版语法

<html>
    <header>
        <title>vue.js 测试</title>
    </header>
    <body>
        <div>
            <h3 id="firstVue">
                {{mydata}}
                {{mydata2}}
                <button>{{mydata3}}</button>
            </h3>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            var myvue=new Vue({
                el:"#firstVue",
                data:{
                    mydata:"是大户大师的",                    
                    mydata2:"张三李四王五",
                    mydata3:"点击",
                }
            })
        </script>
    </body>
</html>
View Code

2、使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container" style=" 100%;">
        <div v-html="show"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#container",
            data:{
                show:"<h3>VueJS简明教程</h3>"
            }
        })
    </script>
</body>
</html>
View Code

3、使用 v-model: 语法使用户的页面输入反向传递回vue实例变量

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container" style=" 100%;">
        <input v-model="show" type="text"/>
        <div v-html="show"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#container",
            data:{
                show:"<h3>VueJS简明教程</h3>",
            }
        })
    </script>
</body>
</html>
View Code

4、HTML 属性中的值应使用 v-bind 指令。

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

     以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showClass{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="container">
        <label>修改颜色</label><input type="checkbox" v-model="use"/>
        <div v-bind:class="{'showClass':use}">
            <h3>hell Word</h3>
        </div>
        <div v-html="show"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#container",
            data:{
                show:"<h3>VueJS简明教程</h3>",
                use:''
            }
        })
    </script>
</body>
</html>
View Code

　判断是否选中，选中的话显示样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <label>修改颜色</label><input type="checkbox" v-model="use" />
        <div v-bind:style="{'color': 'orange','display':use?'block':'none'}">
            <h3>hell Word</h3>
        </div>
        <div v-html="show"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
            data: {
                show: "<h3>VueJS简明教程</h3>",
                use: false
            }
        })
    </script>
</body>
</html>
View Code
    v-bind:href 的使用，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <a v-bind:href="href">hello Word</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
            data: {
                href:"http://www.runoob.com"
            }
        })
    </script>
</body>
</html>
View Code

5、if else 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container" style=" 100%;">
        {{1+1}} <br/>
        {{isCheck?'true':'false'}} <br/>
        {{strs.split(',').join()}} <br/>
        <div v-bind:id="'list'+id">你好 vue</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#container",
            data:{
                isCheck:true,
                strs:'张三,李四,王五',
                id:11
            }
        })
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <h3 v-if="Math.random()>0.5">这是第一条</h3>
        <div v-else>
            <a href="https://www.baidu.com">hello Word</a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
        })
    </script>
</body>

</html>
View Code

带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <h3 v-if="check1">这是第一条</h3>
        <div v-if="check2">
            这是第二条
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
            data: {
                check1:true,
                check2:true
            }
        })
    </script>
</body>
</html>
View Code

6、v-bind:on 的使用，它用于监听 DOM 事件：

<a v-on:click="doSomething">

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <h3>{{show}}</h3>
        <button v-on:click="controlShow">控制反转</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
            data: {
                show:'锄禾日当午！'
            },
            methods:{
                controlShow:function(){
                    this.show=this.show.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>
View Code

7、 我们也可以使用 v-show 指令来根据条件展示元素：

<h1 v-show="ok">Hello!</h1>

8、v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <ol>
            <li v-for="item in arrays">
                {{item.name}}
            </li>
        </ol>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var arrays=[
            {name:'张三',age:11},
            {name:'李四',age:23},
            {name:'王五',age:52},
        ];
        var vue = new Vue({
            el: "#container",
            data:{
                arrays:arrays
            }
        })
    </script>
</body>

</html>
View Code

二、监听属性

 1、watch  实现简单的计数器

<html>
    <header>
        <title>vue.js 测试</title>
    </header>
    <body>
        <div>
            <h3 id="firstVue">
                计数器:{{total}}
                <br/>
                <button v-on:click=" total++ ">点击</button>
            </h3>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            var vm=new Vue({
                el:"#firstVue",
                data:{
                    total:1, 
                }
            })
            //监听 total 数值的变化
            vm.$watch("total",function(after,before){
                alert('计数器值的变化 :' + before + ' 变为 ' + after);
            })
        </script>
    </body>
</html>
View Code

2、watch  实现简单的 米m 和 千米km 的转换。

<html>
<header>
    <title>vue.js 测试</title>
</header>

<body>
    <div>
        <div id="container">
            千米 : <input v-model.number="km" />
            米 : <input v-model.number="m" />
        </div>
        <p id="info"></p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#container",
            data: {
                km: "0",
                m: "0",
            },
            watch: {
                m: function (val) {
                    this.m = val;
                    this.km = val / 1000;
                },
                km: function (val) {
                    this.km = val;
                    this.m = val * 1000;
                }
            }
        })
        //监听 total 数值的变化
        vm.$watch("km", function (newValue, oldValue) {
            document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        })
    </script>
</body>
</html>
View Code

 三、事件处理

1、事件监听可以使用 v-on 指令：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <button v-on:click="say('hello')">点击</button>
        <button v-on:click="say('你好')">点击</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#container",
            methods:{
                say:function(message){
                    if(message){
                        alert(message);
                    }
                }
            }
        })
    </script>
</body>

</html>
View Code

2、事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 阻止捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

  • .enter
  • .tab
  • .delete (捕获 "删除" 和 "退格" 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wwj1992/p/13712821.html