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

相关阅读:
JavaScript操作符instanceof揭秘
 Linux打开txt文件乱码的解决方法
 Working copy locked run svn cleanup not work
poj 2299 UltraQuickSort 归并排序求解逆序对
 poj 2312 Battle City 优先队列＋bfs 或记忆化广搜
 poj2352 stars 树状数组
 poj 2286 The Rotation Game 迭代加深
 hdu 1800 Flying to the Mars
poj 3038 Children of the Candy Corn bfs dfs
hdu 1983 Kaitou Kid The Phantom Thief (2) DFS + BFS
原文地址：https://www.cnblogs.com/wwj1992/p/13712821.html