美文网首页Vue
Vue模板语法

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初学-模板语法

    模板语法 Vue使用了基于HTML的模板语法，语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是...

  • 《二》、Vue核心——基本使用

    一、Vue的基本使用 1、编码 2、理解 Vue 的 MVVM 3、模板语法 （1）、模板语法的理解  Ⅰ、动态的...

  • VUE指令

    vue实例 创建.vue文件 模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DO...

  • vue基础语法

    vue常用基础语法： 一、模板语法 1.vue使用基于html的模板语法，智能计算出最少需呀重复渲染的组件；2.数...

  • 模板语法

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

  • Vue.js模板语法

    Vue.js模板语法 Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的教...

  • Vue学习的第三天

    模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

  • Vue.js学习笔记（3）

    模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

  • 模板语法

    模板语法