Vue模板语法

作者: HeloWxl | 来源:发表于2019-11-25 21:47 被阅读0次

Vue.js使用了基于HTML的模版语法，允许开发者声明式的将DOM绑定至底层Vue实力的数据。

1、文本

数据绑定最常见的形式就是使用{{.....}}的文本插值。

<span>Message: {{ data }}</span>

2、HTML

使用v-html指令用于输出html代码相当于jquery的innerHTML.

<body>
    <div id="app">
        <div v-html="url"></div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            url:'<a href = "https://www.baidu.com">百度一下</a>'
        }
    })
</script>

HTML.png

3、表单输入框

通过v-model指令

<body>
<div id="app">
    <input v-model="message">
    <p>输入框的值：{{message}}</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'大家好'
        }
    })
</script>

表单输入框.png

4、指令v-bind

HTML属性中的值可以使用v-bind指令动态修改，v-bind可以简写为：(冒号)

<body>
<div id="app">
   <div v-bind:id="id">我是div</div>
    <a v-bind:href="url">百度一下</a>
    <h1 v-bind:class="{'class1':use}"></h1>
    <a :href="url">跳转</a>
    输入跳转地址：<input v-model="url">
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            id:'divId',
            url:'https://www.baidu.com',
            use:true
        }
    })
</script>

指令v-bind.png

5、条件判断指令v-if与v-show

v-if 条件满足时显示
v-else 和 v-if 搭配使用
v-else-if 多个条件的判断
v-show条件满足时显示

<body>
<div id="app">
    请输入分数：<input v-model="score">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
    <div v-if="visible">
        猜猜我在不在页面上
    </div>
    <p v-show="visible">我会隐身</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            score:89,
            visible:false
        }
    })
</script>

条件判断指令v-if与v-show.png

6、循环语句

6.1 v-for 循环

v-for指令需要以user in userList 形式特殊语法，userList是原数据并且user是数组元素迭代的别名。

<body>
<div id="app">
    <table>
        <tr>
            <th>姓名</th>
            <th>地址</th>
            <th>电话号码</th>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.addr}}</td>
            <td>{{user.mobile}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            userList:[
                {name:'王咸鱼',addr:'合肥市',mobile:'128399400595'},
                {name:'小明',addr:'上海',mobile:'123449400595'},
                {name:'小红',addr:'北京',mobile:'128323400595'},
                {name:'小花',addr:'南京',mobile:'134559400595'},
            ]
        }
    })
</script>

循环语句.png

6.2 循环语句-怎么回去到数组的下标

v-for指令可以使用（user ,index） in userList 形式的特殊语法，userList是源数据数组并且user是数组元素迭代的别名，index是数组在userList中的下标。

<body>
<div id="app">
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>地址</th>
            <th>电话号码</th>
        </tr>
        <tr v-for="(user,index) in userList">
            <td>{{index}}</td>
            <td>{{user.name}}</td>
            <td>{{user.addr}}</td>
            <td>{{user.mobile}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            userList:[
                {name:'王咸鱼',addr:'合肥市',mobile:'128399400595'},
                {name:'小明',addr:'上海',mobile:'123449400595'},
                {name:'小红',addr:'北京',mobile:'128323400595'},
                {name:'小花',addr:'南京',mobile:'134559400595'},
            ]
        }
    })
</script>

循环语句-怎么回去到数组的下标.png

6.3 循环语句-怎么让一段话重复10次显示

v-for 指令可以迭代整数

<body>
<div id="app">
   <p v-for="num in 10">我是段落{{num}}</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{}
    })
</script>

循环语句-怎么让一段话重复10次显示.png

6.4 循环语句-怎么遍历一个用户的信息的展示

v-for 指令可以迭代对象

<body>
<div id="app">
    <p v-for="(value,key) in user">
        {{key}}:{{value}}
    </p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{
                name:"张三",
                age:20,
                addr:"合肥",
                mobiler:'18283884903'
            }
        }
    })
</script>

image.png

7、计算属性

7.1 Demo01

计算属性写在computed中，默认方法为get⽅方法，关联的值改变时计算属性将会自动更更新可以将一些复杂的计算使⽤计算属性来标识

<body>
<div id="app">
    请输入分数：<input v-model = "score">
    <hr>
    成绩：{{result}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            score:0
        },
        computed:{
            result(){
                if(this.score>=90){
                    return '优秀'
                }else if (this.score>=80){
                    return '良好'
                }else if(this.score>=60){
                    return '及格'
                }
                return '不及格'
            }
        }
    })
</script>

image.png

7.2 Demo02

<body>
<div id="app">
    请输入信息(姓名、年龄)：<input v-model = "userInfo">
    <hr>
    姓名：{{name}}
    <hr>
    年龄：{{age}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'小明',
            age:23
        },
        computed:{
            userInfo:{
                get:function () {
                    return this.name+":"+this.age
                },
                set:function (newVel) {
                    console.log(newVel)
                    var arr = newVel.split(':')
                    this.name = arr[0]
                    this.age = arr[1]
                }
            }
        }
    })
</script>
</html>

demo2.png

8、事件处理

8.1 demo1

v-on:事件名称=回调方法或语句
可以简写为 @事件名称=回调方法或语句
常⽤用的事件有 click、mouseenter、mouseleave、mousedown、mouseup、mouseout、mouseover、keyup、 keydown、keypress等
不用再自己注册事件了

<body>
<div id="app">
   <button v-on:click="hi">你好</button>
    <button v-on:click="hello('tom')">你好(传参)</button>
    <button @click="hei()">你好(简写)</button>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        method:{
            hi:function () {
                alert('你好')
            },
            hello:function (name) {
                alert('你好'+name)  
            },
            hei:function () {
              alert('嘿')  
            }
        }
    })
</script>

image.png

8.2 demo2

<body>
<div id="app">
   <div :class="{'class-in':mouseIn,'class-out':!mouseIn}"
   @mouseenter="mouseIn=true"
   @mouseout="mouseIn=false">
       一个DIV
   </div>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            mouseIn:false
        }
    })
</script>

class-in.png

class-out.png

9、表单

9.1 复选框

<body>
<div id="app">
    地址：
    <input type="checkbox" value="SH" v-model="addrs">上海</input>
    <input type="checkbox" value="HF" v-model="addrs">合肥</input>
    <input type="checkbox" value="BJ" v-model="addrs">北京</input>
    <input type="checkbox" value="NJ" v-model="addrs">南京</input>
    <hr>
    选中的地址：{{addrs}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            addrs:[]
        }
    })
</script>

复选框

9.2 单选框

<body>
<div id="app">
    付款方式：
    <input type="radio" value="Alipay" v-model="payType">支付宝</input>
    <input type="radio" value="wx" v-model="payType">微信</input>
    <input type="radio" value="cash" v-model="payType">现金</input>
    <hr>
    选中的付款方式：{{payType}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            payType:[]
        }
    })
</script

image.png

9.3 下拉框

<body>
<div id="app">
    付款方式：
    <select v-model="payType">
        <template v-for="pay in payList">
            <option :value="pay.value">{{pay.name}}</option>
        </template>
    </select>
    <hr>
    选中的付款方式：{{payType}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            payType:'Alipay',
            payList:[
                {
                    name:'支付宝',
                    value:'Alipay'
                },
                {
                    name:'微信',
                    value:'wx'
                },
                {
                    name:'现金',
                    value:'cash'
                }
            ]
        }
    })
</script>

下拉框

9.4 表单-修饰符1

如果想自动将⽤户的输⼊入值转为数值类型，可以添加一个修饰符 number 给 v-model 来处理理输入值，这样就限制了用户只能输入数值了，如果要自动过滤⽤户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输⼊

<body>
<div id="app">
    姓名：<input v-model.trim="name">
    年龄：<input v-model.number="age">
    <hr>
    个人信息：{{name}}:{{age}}岁
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            age:20,
            name:'小明'
        }
    })
</script>

修饰符.png

9.5 表单-修饰符2

我们经常会遇到⼀个需求，输入框中输入信息后键盘回⻋车需要触发⼀个事件还有其他的按键别名
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta

<body>
<div id="app">
    用户名：<input v-on:keyup.enter="submit" v-model="name">
    <button @click="submit">提交</button>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'小明'
        },methods:{
            submit:function () {
                alert("提交："+this.name)
            }
        }
    })
</script>

提交.png

大家如果需要vue.js文件的话，可以私信我或者在评论处留言你的邮箱

Vue模板语法

1、文本

2、HTML

3、表单输入框

4、指令v-bind

5、条件判断指令v-if与v-show

6、循环语句

6.1 v-for 循环

6.2 循环语句-怎么回去到数组的下标

6.3 循环语句-怎么让一段话重复10次显示

6.4 循环语句-怎么遍历一个用户的信息的展示

7、计算属性

7.1 Demo01

7.2 Demo02

8、事件处理

8.1 demo1

8.2 demo2

9、表单

9.1 复选框

9.2 单选框

9.3 下拉框

9.4 表单-修饰符1

9.5 表单-修饰符2

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue