Vue常用标签，Demo2

最新推荐文章于 2025-01-13 12:41:28 发布

韫钰

最新推荐文章于 2025-01-13 12:41:28 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_51034633/article/details/124624685

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何创建一个Vue实例，包括在HTML中完整引入Vue.js的步骤。同时，深入讲解了Vue的v-if、v-show、插值表达式{{}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个Vue实例：

    var vm = new Vue({  
        el:'#app',  
        data:{},  
        methods:{}  
})

在html中完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{},

        methods:{}
    })
    </script>
</body>
</html>

标签介绍：

v-if和v-show

v-if特点:每次都会重新创建和删除dom元素。
v-show特点: 每次不会创建和删除,但改变display的属性。

插值表达式{{}}，可以在前后插入一些内容
- {{title}} //title为data中定义的内容
- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式
v-cloak:在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁
- <style>
- [v-cloak] { display: none; }
- </style>
- <div id="app" v-cloak>
v-text：会替换掉元素里的内容
- <p v-text='p1'>allalalall</p>
- p1为data中定义好内容，会将元素中的内容覆盖，不识别标签
v-html：可以渲染html界面
- <p v-html='p2'></p>
- 识别内容中的标签
v-on：进行事件的绑定，用的最多的是click事件绑定
- 简写@
- <button v-on:click="chage('111111')">按钮</button>
- <button @click="chage('111111')">按钮</button>
事件修饰符
- .stop 阻止冒泡
  - <div class="box3" @click.stop='click("最里边")'>.stop</div>
  - 直接在事件后面打点使用，下同
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发
- .once 事件只触发一次
v-model数据双向绑定
- <input type="text" v-model:value='title'>
- title为data中定义的,双向绑定后用户可以更改该数据

v-for

创建一个公用的js文件:

var vm = new Vue({
            el:'#app',           
            data:{
                list:[1,2,3,4,5,6,7,8],
                list2:[
                    {id:1,name:'zs1'},
                    {id:2,name:'zs2'},
                    {id:3,name:'zs3'},
                    {id:4,name:'zs4'},                 
                ],
                user1:{
                    id : 1,
                    name:"张三丰",
                    sex:"男"
                }
            },
            methods:{}
        })

1.普通循环

 <p v-for = "(item,i) in list">---索引值---{{i}}---数值---{{item}}</p>

2.复杂函数遍历对象数组

 <p v-for = "(user,i) in list2">ID:{{user.id}}---名字：{{user.name}}---索引：{{i}}</p>

3.遍历对象

<p v-for="(val,key,index) in user1">值是：{{val}}---键是：{{key}}--索引{{index}}</p>

4.迭代数字

ps:使用v-for迭代数字，第一个数字从1开始。

<p v-for="count in 10">这是第{{count}}个数字</p>

常用的七个属性：

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，