Vue基础语法与指令

项目初始化

用vscode打开终端，输入npm init -y生成package.json

然后安装vue

npm install vue

需要注意的是，我遇到了这个问题

出现原因：文件夹名和生成的package.json中的name属性值相同，更改package.json的name属性，然后重新执行npm install vue成功生成vue项目。

创建Vue实例，关联页面的模板，将自己的数据绑定到模板上，响应式的
指令用来简化对DOM的操作
声明方法用于做复杂的操作，methods用来封装这些方法

<div id="app">

        <!-- 单向绑定 -->

        <h1>Hello，{{name}},I'm {{num}} age</h1>

        <!-- 双向绑定，num先绑定vue中data的num,num改变，视图跟着改变，输入框中的值改变，num也改变 -->

        <input type="text" v-model="num">

        <button v-on:click="num++">点赞</button>

        <button v-on:click="cancel">取消</button>

    </div>

    <script>

        // 声明vue对象

        let app = new Vue({

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

            data: {//封装数据

                name: "张三",

                num: 20

            },

            methods: {//封装方法

                cancel() {

                    if (this.num > 0) {

                        this.num--;

                    }else{

                        alert("亲~，取消完毕，不能再取消了！")

                    }

                }

            },

        });

    </script>

插值表达式

格式：{{表达式}}

说明：

表达式支持JS语法，可以调用JS的内置函数，但是要求必须有返回值。例如{{1+1}}可以，{{hello()}}hello是一个由返回值的函数。
可以直接获取Vue的实例中定义的数据或者函数。

插值闪烁

使用{{}}的方式在网速较慢的时候会出现问题，在数据未加载完毕的时候，页面会显示出原始的{{}}，加载完毕后才显示正确的数据，这种现象被叫做插值闪烁。

v-text与v-html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../node_modules/vue/dist/vue.js"></script>

    <title>Vue</title>

</head>

<body>

    <!-- 插值表达式{{}} -->

    <div id="app">

        {{msg}} {{sayHello()}} {{1+1}}<br>

        <!-- v-html会解析HTML内容 -->

        <span v-html="msg"></span><br>

        <span v-text="msg"></span><br>

    </div>

</body>

<script>

    new Vue({

        el: "#app",

        data: {

            msg: "<h1>HaWei</h1>"

        },

        methods: {

            sayHello() {

                return "Hello Wrold";

            }

        }

    })

</script>

</html>

v-bind

v-bind用来绑定标签的属性值，可以绑定超链接的href，img的src等，v-bind可以简写为:。

<!-- v-bind绑定标签的属性值，例如绑定style/class的属性值 -->

    <div id="app">

        <a v-bind:href="link">百度一下</a>

        <h3 v-bind:class="{active:isActive,'text-danger':hashEror}" v-bind:style="{color:color1,fontSize:fontsize}">试一试</h3>

    </div>

    <script>

        let app = new Vue({

            el: "#app",

            data: {

                link: "http://www.baidu.com",

                color1:"blue",

                fontsize:"30px",

                isActive:true,

                hasError:true,

            }

        })

    </script>

v-model

v-model用来进行双向绑定，当页面改变的时候，定义的data也会改变。

  <div id="app">

        会用的编程语言：<br>

        <input type="checkbox" v-model="language" value="Java">Java <br>

        <input type="checkbox" v-model="language" value="Python">Python <br>

        <input type="checkbox" v-model="language" value="PHP">PHP <br>

        <input type="checkbox" v-model="language" value="C">C <br>

        选中的结果：{{language.join(",")}}

        <!-- 数组.join(" ")表示将数组以空格分隔 -->

    </div>

    <script>

        // 声明vue对象

        let app = new Vue({

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

            data: {//封装数据

                language: []

            },

            methods: {//封装方法

            },

        });

    </script>

v-on

v-on用来绑定事件，基本用法就是绑定一个点击功能，进行点赞，v-on可以简写成@click；

		<button v-on:click="num++">点赞</button>

        <button v-on:click="cancel">取消</button>

	<script>

        // 声明vue对象

        let app = new Vue({

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

            data: {//封装数据

                name: "张三",

                num: 20

            },

            methods: {//封装方法

                cancel() {

                    if (this.num > 0) {

                        this.num--;

                    }else{

                        alert("亲~，取消完毕，不能再取消了！")

                    }

                }

            },

        });

</script>

事件修饰符

在时间处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法上轻松实现这些功能，但是方法只是纯粹的数据逻辑而不是处理DOm事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。事件修饰符由点开头的指令后缀来表示。

.stop：阻止事件冒泡到父类元素
这个该如何理解呢？
别怕，举个例子你就懂了。
在一个HTML中有如下代码，vue.js已经导入。

 <div id="app">

        <!-- 事件修饰符，事件.stop表示阻止事件冒泡，事件.prevent:表示阻止dom的默认行为，例如阻止超链接生效，事件.once代表事件只生效一次 -->

        <div id="lgapp" style="border:1px solid red;padding: 20px;" v-on:click="hello">

            大div

            <div id="smapp" style="border:1px solid black;padding: 20px;" @click="hello">

                小div

                <a href="http://www.baidu.com">去百度</a>

            </div>

        </div>

    </div>

    <script>

        // 声明vue对象

        let app = new Vue({

            el: "#app",// 绑定小div

            data: {//封装数据

            },

            methods: {//封装方法

                hello() {

                    alert("hello ");

                }

            },

        });

    </script>

当去点击小div的时候会调用两次hello方法，因为对于小div来说，父类元素大div也绑定了相同的方法，这种现象叫做事件冒泡，我们本想只用子元素绑定的事件但是父元素事件也执行了，那该如何处理。
解决方法就是使用.stop指令作用在子元素上阻止冒泡到父类元素。

		<div id="smapp" style="border:1px solid black;padding: 20px;" @click.stop="hello">

                小div

                <a href="http://www.baidu.com">去百度</a>

         </div>

这次点击就只调用了一次hello方法。

但是当我们点击去百度那个超链接的时候，因为超链接在小div中，所以先调用hello方法，弹一次hello，再转到百度的首页，如果想要阻止超链接在弹窗后跳转到百度的首页，可以使用.prevent指令阻止这种默认行为。

<a href="http://www.baidu.com" @click.prevent="">去百度</a>

还有想要event只执行一次，可以使用.once指令。

按键修饰符

当键盘按下某个键的时候绑定的事件。
想要记住所有的键码很困难，所以vue默认提供了建码的别名。

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space(空格键)
.up
.down
.left
.right

定义输入框每次按上箭头count+2，按下箭头count-1

<input type="text"  v-model="count" @keyup.up="count=count+2" @keyup.down="count--">

v-for

如果学过jstl，jsp，或者模板引擎的话，这个语法很相似。用来遍历集合或者数组。
遍历students数组

   <div id="app">

        <ul>

            <li v-for="(item, index) in students" :key="index">

                <!-- 遍历对象有三种写法

                1、v-for="item in items "

                2、v-for="(item, index) in students" index是索引

                3、v-for="(v,k, index) in students" :key="index" v是对象，k是键

                -->

                下标：{{index}} ==> 名字：{{item.name}} ===》 年龄：{{item.age}}

            </li>

        </ul>

        <!-- 遍历的时候加上:key=“index”用来增加渲染效率，:key用来区分不同的数据 -->

        <ul v-for="(v,k, index) in students" :key="index">

            k-v=>{{k}}:{{v}}

        </ul>

    </div>

    <script>

        // 声明vue对象

        let app = new Vue({

            el: "#app",// div

            data: {//封装数据

                count: 0,

                students: [

                    { id: 1, name: "程咬金", age: 19 },

                    { id: 2, name: "东方朔", age: 22 },

                    { id: 3, name: "镜", age: 32 },

                    { id: 4, name: "狂贴", age: 45 },

                    { id: 5, name: "吕布", age: 24 },

                ],

            },

        });

    </script>

渲染结果

v-if与v-show

两个指令都表示当判断结果是true的时候才显示元素。
但是两者处理的方式有所不同。

举个例子看一下

	<div id="app">

        <button @click="flag=!flag">改变显示状态</button>

        <h1 v-if="flag">看到了！v-if</h1>

        <h1 v-show="flag">看到了！v-show</h1>

    </div>

    <script>

        // 声明vue对象

        let app = new Vue({

            el: "#app",// 绑定小div

            data: {//封装数据

                flag:true,

            },

            methods: {//封装方法

            },

        });

    </script>

当我点击按钮改变状态的时候，检察元素可以看到。

所以show是将元素的display设置成none;而v-if是直接将元素注释掉。
相比于v-show，v-if更适合用于逻辑处理，常常和v-for搭配使用，比如遍历students数组时，只显示年龄大于20岁的。

<li v-for="(item, index) in students" :key="index" v-if="item.age>=20">

本人初学，菜鸟一个，以上有理解不到位的敬请指出！