Vue的安装和Vue的指令学习_vue.js v2.5.22-CSDN博客

本文链接：https://blog.csdn.net/hgh1998/article/details/98629650

Vue的安装

官方下载地址：https://github.com/vuejs/vue/releases
我用的是Vue.js v2.5.22
在这里插入图片描述

下载完毕后，并用 <script> 标签引入，Vue 会被注册为一个全局变量。

Vue的介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue的主要特点就和它官网（http://cn.vuejs.org/）所介绍的那样：

（1）简洁（2）轻量（3）快速（4）数据驱动（5）模块友好（6）组件化

Vue起步

我们通过一个实例来了解Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
 <div id="app">
  {{ message }}
 </div>
 <script src="../lib/vue.js" type="text/javascript"></script>
 <script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

 </script>
</body>
</html>

每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：

var vm = new Vue({
  // 选项
})

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 app，在 div 元素中：

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

这意味着接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性。
{{ }} （插值表达式）语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成 Model中的数据。

Vue.js 模板语法

插值

插值表达式：
语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成Model中的数据

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

v-cloak指令：
语法：把它当作HTML元素的一个属性使用
示例：

<p v-cloak>{{msg1}}</p>

特点：
当Vue加载完毕后，v-cloak属性会自动消失
使用：
添加如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示实现，解决插值表达式闪烁的问题

 [v-cloak]{
    display: none;
          }

v-text：
语法：<p v-text="msg1"></p>
作用：和插值表达式一样，用于给HTML元素添加文本
区别：
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据完全替换到HTML元素中（覆盖）
3.插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
相同点：
1.插值表达式和v-text都可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）

v-html：
和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML

<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello,Vue.js</h1>'
  }
})
</script>

v-bind：
语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
v-bind可以缩写成一个‘：’

<div id="app">
    <label>用户名：<input type="text" name="username" v-bind:value="msg"/></label>
    <label>用户名：<input type="text" name="username" :value="msg"/></label>
    <label>用户名：<input type="text" name="username" :value="msg+'你好'"/></label>
    <label>用户名：<input type="text" name="username" :value="msg+name"/></label>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"我是来自Model中的内容！",
   
        }
    })
</script>

v-on：
语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码。
【v-on:】等价于【@】

<div id="app">
    <button v-on:click="sayHello(name)">点击下</button>
    <button @click="sayHello(name)">点击下</button>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            name:"小明"
        },
        methods:{
            sayHello:function (name) {
                alert("你好！"+name);
            }
        }
          })
</script>

v-mode：唯一的一个实现双向数据绑定的指令
语法：

 <input type="text" v-model="num1" />
            data:{
                num1:'0',
                num2:'0'
            }

适用元素：表单元素，其它元素不能使用v-model指令
input系列（可以输入内容的）、select、textarea
双向绑定：
model层数据的改变会影响view层HTML结果
HTML中表单元素值的改变会写入对应的model层的数据中
Vue中的for指令
1.使用v-for指令遍历简单数组

  <p v-for="name in names">{{name}}</p>
        <p v-for="name,index in names" v-text="name+'---'+index"></p>

2.使用v-for指令遍历对象数组

  <p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>

3.使用v-for指令遍历对象属性值

  <p v-for="value,key in cqCity">{{key+'--'+value}}</p>

4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历）

 <p v-for="num,index in 12" v-text="num+'---'+index"></p>

【注意】
1.遍历得到的值可以使用【插值表达式、v-text、v-html】显示
2.不管遍历何种数据类型，都可以得到值和索引
3.遍历对象属性和值时可以得到【值、属性名字、索引】
4.值的赋值顺序是：值、【键名】、索引
5.一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
6.遍历过程中接受值的变量名字可以任意
7.遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历）
8.在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化）
注意：
1.key必须是基本数据类型（string/number）
报错：Avoid using non-primitive value as key, use string/number value instead.
2.key的数据值一定不要重复
报错：Duplicate keys detected: ‘3’. This may cause an update error.
技巧：一般使用对象中的值唯一属性（主键）作为key，比如id
语法：

  <p v-for="user in users" :key="user.id">
                    <label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
                </p>

【知识点】
1.如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定
2.数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
3.在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据的唯一关联，避免被其它操作（指非本元素）影响。

<div id="app">
        <h1>Vue中的for指令</h1>
        <p v-for="name in names">{{name}}</p>
        <hr/>
        <p v-for="name,index in names" v-text="name+'---'+index"></p>
        <hr/>
        <p v-for="user in users" v-text="user"></p>
        <hr/>
        <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p>
        <hr/>
        <p v-for="value,key in cqCity">{{key+'--'+value}}</p>
        <hr/>
        <p v-for="num in 12" v-text="num"></p>
        <hr/>
        <p v-for="num,index in 12" v-text="num+'---'+index"></p>

        <h1>Vue中的for指令实现数据绑定</h1>
        <label>id：<input type="text" v-model="id"/></label>
        <label>name：<input type="text" v-model="name"/></label>
        <label>age：<input type="text" v-model="age"/></label>
        <label><button @click="add()">添加人员信息</button></label>
        <p v-for="user in users" :key="user.id">
            <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
        </p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                names:["张三","李四","王五","孙七","赵六","周八","吴九","郑十","刘一"],
                users:[
                    {id:1,name:"胡某",age:32},
                    {id:2,name:"袁某",age:33},
                    {id:3,name:"霍某",age:35}
                ],
                cqCity:{no:"渝",level:"市",area:["渝北区","渝中区","江北区","沙坪坝区","江北区"]},
                id:'',
                name:'',
                age:''
            },
            methods:{
                add(){
                    //this.users.push({id:this.id,name:this.name,age:this.age});
                    this.users.unshift({id:this.id,name:this.name,age:this.age});
                }
            }
        });
    </script>

v-if和v-show指令：
v-if和v-show的区别？
1.v-if切换元素状态的具体操作是（创建元素–删除元素）
比较消耗创建性能
2.v-show切换元素状态的具体操作是（修改css的display样式）
比较消耗渲染性能
使用技巧：
如果该元素会经常显示/隐藏，则使用v-show
如果该元素默认情况下不会显示（大多数时候不会显示），则使用v-if
代码技巧：
如果使用vue绑定的方法只有一句代码，则可以直接写在绑定结果中

    <button @click="flag=!flag">控制元素的显示隐藏</button>

Vue绑定元素样式：
Vue实现行内样式：
方式1：传入JavaScript对象{样式名字1:值1,样式名字2:值2…}
方式2：传入一个Vue中的Model层的一个属性值
方式3：传入一个Vue中的Model层的多个属性值组成的数组
Vue实现class样式：
方式1：直接传入单个class的名字
:class="‘color’"
方式2：传入class名字组成的数组
:class="[‘color’,‘fontSize’]"
方式3：使用三目表达式实现样式的逻辑加入
:class="[‘color’,‘fontSize’,false?‘active’:’’]"
:class="[‘color’,‘fontSize’,5>3?‘active’:’’]"
:class="[‘color’,‘fontSize’,flag===false?‘active’:’’]"
方式4：数组中嵌套对象
:class="[‘color’,‘fontSize’,{active:false}]"
方式5：整个class的值就使用数组
:class="{color:true,fontSize:false,space:true,style:true,active:false}
方式6：从Vue的Model中获取class值
:class="[classInBox01,classInBox02]"

<div id="app">
        <h1 v-bind:style="{color:'red','font-size':'20px'}">我是一个H1标题</h1>
        <h1 v-bind:style="innerStyle01">我是一个H1标题</h1>
        <h1 v-bind:style="[innerStyle01,innerStyle02]">我是一个H1标题</h1>

        <hr/>
        <h1 :class="'color'">我是一个H1标题</h1>
        <h1 :class='"color"'>我是一个H1标题</h1>
        <h1 :class="['color','fontSize']">我是一个H1标题</h1>
        <h1 :class="['color','fontSize',false?'active':'']">我是一个H1标题</h1>
        <h1 :class="['color','fontSize',5>3?'active':'']">我是一个H1标题</h1>
        <h1 :class="['color','fontSize',flag===false?'active':'']">我是一个H1标题</h1>
        <h1 :class="['color','fontSize',{active:false}]">我是一个H1标题</h1>
        <h1 :class="{color:true,fontSize:false,space:true,style:true,active:false}">我是一个H1标题</h1>
        <h1 :class="[classInBox01,classInBox02]">我是一个H1标题</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                innerStyle01:{color:'red','font-size':'20px'},
                innerStyle02:{"letter-spacing":"1em"},
                flag:true,
                classInBox01:{color:true,fontSize:false},
                classInBox02:{space:true,style:true,active:false}
            }
        });
    </script>

【注意】
1.JavaScript的对象中，属性可以不使用引号（单双）
2.当属性包含字符-的时候，必须使用引号，否则会报错
3.使用vue绑定class值时，class的值必须使用引号引起来，否则会当作变量从Model中查找
4.使用vue绑定class值时，如果值为对象，则不能加引号

事件修饰：
1.事件默认是会冒泡的（点击内部元素，会逐层向外扩散，相同的事件就会被触发—冒泡）
阻止方式：给需要阻止冒泡的事件加上stop修饰
特点：事件到了加了stop修饰的元素时就会被阻断
2.阻止元素的默认事件
元素默认会执行它的默认事件
默认事件：
2.1：超链接的跳转
2.2：表单的提交
阻止方式：给需要阻止默认事件的事件绑定加上prevent修饰
3.使用事件捕获模式处理事件（触发事件的顺序和事件冒泡刚好相反）
特点：加了capture事件修饰的容器先捕获到事件，然后按照冒泡顺序
触发，当然如果其它元素也设置了capture事件修饰，则按照修饰顺序来
使用方式：给需要使用捕获机制处理的事件绑定加入修饰符capture
4.事件源是自身时才触发事件
使用方式：给元素绑定的事件中加入self修饰，此时只有事件源是元素本身时
才会触发事件
特点：
1.能阻止事件冒泡
2.只能阻止自身的事件不被触发，而其子元素和父元素依然满足冒泡行为
或捕获机制
3.这是stop和self之间的一个差距
5.限定事件有效次数为1
使用方式：给元素绑定的事件加入once修饰，表示此事件只会执行一次
特点：绑定事件只执行一次，那么意味着事件的所有修饰也会在事件无效后消失
比如：事件冒泡和默认行为
【注意】
1.事件修饰是可以串联（叠加）的
2.事件修饰的语法：
@click.prevent.once=“aClick”
3.事件修饰总结：
stop
prevent
capture
self
once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的事件修饰符</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
    <style type="text/css">
        div[id]{
            box-sizing: border-box;
        }
        #outer{
            width: 400px;
            height: 400px;
            background-color: yellow;
            padding: 100px;
        }
        #inner{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #content{
            width: 100px;
            height: 100px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <h1>Vue中的事件修饰符</h1>
   
    <div id="app">
       

        <!--阻止默认事件-->
        <hr/>
        <a href="https://www.baidu.com" @click.prevent="aClick">点击跳转到百度</a>
        <hr/>
        <form action="https://www.baidu.com">
            <button @click.prevent="btnClick">点击提交表单</button>
        </form>

        

        <!--使用self表示自身触发-->
        <div id="outer" @click="outerClick()">
            <div id="inner" @click.self="innerClick()">
                <div id="content" @click="contentClick()"></div>
            </div>
        </div>

        <!--阻止默认事件-->
        <hr/>
        <a href="https://www.baidu.com" @click.prevent.once="aClick">点击跳转到百度</a>
        <hr/>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                contentClick(){
                    console.log("content被点击了...");
                },
                innerClick(){
                    console.log("inner被点击了...");
                },
                outerClick(){
                    console.log("outer被点击了...");
                },
                aClick(){
                    console.log("a被点击了...");
                },
                btnClick(){
                    console.log("btn被点击了...");
                }
            }
        });
    </script>
</body>
</html>