Vue插值、文本、事件、属性指令

2022-06-24 17:01:52 阅读：215 来源： 互联网

Vue快速使用
模板语法之插值
文本指令
事件指令
属性指令

Vue快速使用

编辑器选择

只要能编写html的编辑器都可以。

引入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

快速使用

在js中创建vue对象：

<script>
    // 新建vue对象
    const vm = new Vue({
        el: '#app', //  键名称固定，值为选择器，#app即id为app的标签
        data: { //  键名称固定，值为各种变量
            name: 'tom',
            age: '18'
        }
    })
</script>

使用模板语法：

<div id="app">
    <!-- name，age为vue对象data中的变量 -->
    <p>我的名字是：{{ name }}</p>
    <p>我的年龄是：{{ age }}</p>
</div>
<script>
    // 新建vue对象
    const vm = new Vue({
        el: '#app', //  键名称固定，值为选择器，#app即id为app的标签
        data: { //  键名称固定，值为各种变量
            name: 'tom',
            age: '18'
        }
    })
</script>

模板语法之插值

基本插值

vue对象的data键中可以放各种变量：

<script>
    // 新建vue对象
    const vm = new Vue({
        el: '#app',
        data: { 
            name: 'tom',
            age: '18'
        }
    })
</script>

模板语法插值(根据变量名)：

<div id="app">
    <p>字符串：{{ name }}</p>
    <p>数值：{{ age }}</p>
    <p>数组：{{ hobby }}</p>
    <p>对象：{{ obj }}</p>
    <p>标签字符串：{{ link }}</p>
</div>

三目运算符

age变量大于等于18，返回值为成年人，否则返回值为未成年人

<p>三目运算符：{{ age>=18?"成年人":"未成年人" }}</p>

文本指令

文本指令，写在标签上的，以 v- 开头的属性。

文本指令	作用
v-text	把变量值显示在标签上，不做渲染，与模板语法一样
v-html	标签字符串会渲染后在显示，其余与-v-text一样
v-show	显示与不显示，修改display属性，会一直在页面上
v-if	显示与不显示，不显示就是直接删除

使用：

<div id="app">
    <p v-text="link1"></p>
    <p v-html="link1"></p>
    <p v-show="show1">显示文字1</p>
    <p v-if="show1">显示文字2</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            show1: false,
        }
    })
</script>

页面效果：

f12查看元素：

v-show与v-if的区别

v-show为false时是设置display属性为none，而v-if为false时是直接删除标签。

事件指令

按钮，标签的事件：单击事件、双击事件...

语法结构：

<p v-on:事件名='函数'></p>

简写：

<p @事件名='函数'></p>

函数需要放在vue对象的methods中。

<script>
    const vm = new Vue({
        methods:{ // 函数要放在methods中，可以放多个
            myFunc:function () {
            },
        }
    })
</script>

案例：点击按钮后名字更改：

<div id="app">
    <button v-on:click="myFunc">名字更改</button>
    <p>名字：{{ name }}</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
           name:'tom'
        },
        methods:{ // 函数要放在methods中，可以放多个
            myFunc:function () {
                this.name = 'john'
            },
        }
    })
</script>

属性指令

标签都是有属性的，想要动态变化属性，可以使用v-bind。

<img v-bind:属性='值' />

动态变化属性：

<div id="app">
    <button v-on:click="changeImg">图片更改</button>
    <img v-bind:src=imgUrl alt="" width="500px">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
           imgUrl:'https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
        },
        methods:{
            changeImg:function () {
                this.imgUrl = 'https://img1.baidu.com/it/u=700675537,3936578503&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
            },
        }
    })
</script>

标签：Vue,const,name,插值,app,vm,new,文本
来源： https://www.cnblogs.com/yume-zbh/p/16409517.html