VUE指令学习_this.users.unshift-CSDN博客

本文链接：https://blog.csdn.net/kassk/article/details/98629730

什么是VUE

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

VUE下载

可以去vue2的官网或者git（https://github.com/vuejs/vue）下载在这里插入图片描述

Hello,vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{message}}</p>
</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指令

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

v-cloak指令

把它当作HTML元素的一个属性使用
语法：

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

添加如下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

v-bind：

**语法：**在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例：

<label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"我是来自Model中的内容！",
        name:"vue测试"
    }
});

v-on

在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码,v-on指令可以用@事件代替

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind、v-on指令的学习</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>v-bind、v-on指令的学习</h1>
    <div id="app">
        <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+name"></label>
        <button v-on:click="sayHello(name)">点击下显示你好</button>
        <button @click="sayHello(name)">点击下显示你好</button>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"model的内容！",
                name:"傻逼穆晗"
            },
            methods:{
                sayHello:function (name) {
                    alert("你好！"+name);
                }
            }
        });
    </script>
</body>
</html>

双向数据绑定

使用双向相互据绑定实现一个建议计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    num1: <input type="text" v-model="num1">
    <select v-model="opr">
        <option value="+" selected disabled>+</option>
        <option value="-">-</option>
        <option value="-">*</option>
        <option value="-">/</option>
    </select>
    num2: <input type="text" v-model="num2">
    <button @click="calc()">=</button>
    <span v-text="result"></span>

</div>


<script src="../lib/vue.js" type="text/javascript"></script>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
            result:0,
            opr:'+'
        },
        methods:{
            calc(){
                var flag = this.opr;
                switch (flag) {
                    case '+':
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                        break;
                    case '-':
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                        break;
                    case '*':
                        this.result = parseInt(this.num1) * parseInt(this.num2);
                        break;
                    case '/':
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                        break;
                }
            }
        }
    })
</script>
</body>
</html>

v-for指令实现数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--v-for指令实现数据绑定-->
    <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 src="../lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {id:1,name:"张三",age:13},
                {id:2,name:"李四",age:18},
                {id:3,name:"王五",age:29}
            ],
            id:'',
            name:'',
            age:''
        },
        methods:{
            add(){
                this.users.unshift({id:this.id,name:this.name,age:this.age})
            }
        }
    });

</script>

</body>
</html>