Vue入门到实践-2

最新推荐文章于 2024-07-25 09:37:37 发布

南絮朝颜

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量89

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mengtongxch/article/details/104359281

版权

1.vue指令（指带有v-前缀的特殊属性）

1.1、差值表达式{{msg}}

注意：

该表达式支持js语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果，如1+1，没有结果的表达式不允许使用，如var a=1+1;
可以直接获取vue实例中定义的数据或函数

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>差值表达式</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}<br>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
        }
    })
</script>
</body>
</html>

1.2、插值闪烁

使用{{}}方式在网速较慢的时候会出现问题，在数据未加载完成时，页面会显示出原始的{{}}，加载完毕之后才会显示正确的数据，称之为插值闪烁，所以在写代码的时候在刚开始的页面上的时候会先让其在created（）函数里面进行加载

1.3、v-text和v-html

说明：

v-text:将数据输出到元素内部，如果输出的数据有html代码，会作为普通文本进行输出
v-html:将数据输出到元素内部，如果输出的数据有html代码，会被渲染

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text和v-html</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    v-text:<span v-text="msg"></span><br>
    v-html:<span v-html="msg"></span>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"<h2>olivia</h2>"
        }
    })
</script>
</body>
</html>

1.4、v-model

v-text和v-html是单向绑定，主要是用于数据渲染视图，但是反之则不可以，但是v-model是针对于双向绑定的，也就是视图和模型会相互影响。

目前可以实现双向绑定的主要有：input，select，textarea、checkbox、radio、components(Vue自定义组件）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model绑定</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="java" v-model="lag">java<br>
    <input type="checkbox" value="php" v-model="lag">php<br>
    <input type="checkbox" value="swift" v-model="lag">swift<br>
    <h2>
        你选择了：{{lag.join(",")}}
    </h2>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            lag:[]
        }
    })
</script>
</body>
</html>

说明：多个checkbox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型，radio对应的值是input的value值，input和textarea默认对应的model是字符串，select单选对应字符串，多选对应的也是数组

1.5、v-on(用于给页面元素进行绑定事件）

语法：v-on：事件名=''js片段或函数名''(简写语法：@事件名=''js片段或函数名'')

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on绑定事件</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    <!--使用js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名则函数要在vue实例当中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num={{num}}
    </h2>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>
</body>
</html>

1.6、事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，尽管这个可以在方法里面很轻松的实现这一点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理Dom事件细节。

为了解决这个问题，vue.js为v-on提供了事件修饰符，之前提示过，修饰符是由开头的指令后缀来表示的。

.stop:阻止事件冒泡
.prevent:阻止默认事件发生
.capture:使用事件捕获模式
.self:只有元素自身触发事件才执行（冒泡或捕获都不执行）
.once:只执行一次

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on事件修饰符</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num={{num}}
    </h2>
    <hr>
    事件冒泡测试：<br>
    <div style="background-color: lightgreen;width: 100px;height: 100px; "
         @click="print('你点击了div')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="01-demo.html" @click.prevent="print('点击超链接')">测试1</a>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            },
            print(msg){
                console.log(msg)
            }
        }
    })
</script>
</body>
</html>

1.7、v-for

遍历数组：v-for=“item In items”

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="user in users">{{user.name}}---{{user.age}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"olivia","age":8},
                {"name":"lucy","age":14},
                {"name":"zhuliya","age":78},
            ]
        }
    })
</script>
</body>
</html>

数组角标：在遍历数组的时候如果知道数组角标，则可以直接指定第二个参数

语法：v-for="(item,index) in items",index是从0开始的

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for角标测试</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="(user,index) in users">
            {{index+1}}--{{user.name}}--{{user.age}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"olivia","age":8},
                {"name":"lucy","age":7},
            ]
        }
    })
</script>
</body>
</html>

遍历对象

语法：v-for="value in object",v-for="(value,key) in object",v-for="(value,key,index) in object"

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for--object</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
<ul>
    <li v-for="(value,key,index) in person">
        {{index}}--{{key}}--{{value}}
    </li><br>
    <li v-for="(value,key) in person">{{key}}--{{value}}</li><br>
    <li v-for="value in person">{{value}}</li>
</ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"olivia","age":8},
                {"name":"lucy","age":7},
            ],
            person:{"name":"haha","age":3}
        }
    })
</script>
</body>
</html>

key可以有效的提高渲染效率，key一般使用在遍历完之后，又增、减集合元素的时候更有意义，但是要实现这个功能就需要为每一项提供一个唯一的key属性，理想的key值是每一项都要有唯一的id，也就是key是唯一标识

例如：

1.9、v-if和v-show

语法：v-if="布尔表达式"

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
  <button @click="show= !show">点我</button>
    <h2 v-if="show"> hello,vue</h2>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>

v-if和v-for结合使用，v-for优先级更高，就是会先遍历，然后在判断

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
  <button @click="show= !show">点我</button>
    <h2 v-if="show"> hello,vue</h2>
    <ul>
        <li v-for="(user,index) in users" v-if="user.age==8">
            {{index}}--{{user.name}}--{{user.age}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true,
                users:[
                    {"name":"olivia","age":8},
                    {"name":"lucy","age":7},
                ],
        }
    })
</script>
</body>
</html>

v-else:

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="(user,index) in users" v-if="user.age==8" style="background-color: chartreuse">
            {{index}}--{{user.name}}--{{user.age}}
        </li>
        <li v-else style="background-color: red">
            {{index}}--{{user.name}}--{{user.age}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
                users:[
                    {"name":"olivia","age":8},
                    {"name":"lucy","age":7},
                ],
        }
    })
</script>
</body>
</html>

还有v-else-if

1.10、v-show

<h1 v-show="ok">hello!</h1>

v-show的元素会始终保留在Dom当中，v-show只是简单的切换css属性display

南絮朝颜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到实践-2

1.vue指令（指带有v-前缀的特殊属性）1.1、差值表达式{{msg}}注意：该表达式支持js语法，可以调用js内置函数（必须有返回值）表达式必须有返回结果，如1+1，没有结果的表达式不允许使用，如var a=1+1; 可以直接获取vue实例中定义的数据或函数例如：<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫