vue std guide

最新推荐文章于 2024-07-22 08:55:10 发布

Alexmaodali

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量1.4k

点赞数 18

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2201_76122602/article/details/137406424

版权

本文详细介绍了如何创建Vue实例，使用插值表达式、响应式数据，以及Vue的指令、v-model双向绑定、计算属性和监听机制。还涵盖了开发者工具VueDevTools的使用和样式操作的v-bind方法。

摘要由CSDN通过智能技术生成

1.创建 Vue 实例 HelloVue.html

// el:挂载,配置选择器
// data：数据
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>
</body>

</html>

2.插值表达式 {{}}

不能在标签属性中插入表达式如:title="{{msg}}"

{{alex.name}} {{alex.age}} const app = new Vue({ el: '#app', data: { msg: 'Hello
Vue', alex:{ name:'Alex', age:33 } } })

3.Vue 响应式数据

<!-- data里的数据会写入实例中  -->
<!-- app.msg="hello"; -->
app.alex.age++;

4.开发者工具 vue devtools Extension

5.Vue 指令

<!-- v-前缀的特殊标签属性 -->
v-html="Expression" == > innerHtml   会覆盖app里的内容
    <div id="app" v-html="link">
        {{alex.name}}
        {{alex.age}} <br>
        {{link}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                alex: {
                    name: 'Alex',
                    age: 33
                },
                link: `
        <a href="https://www.bilibili.com/online.html">Bilibili</a>
                `
            }
        })
    </script>

v-show v-if

v-show="flag" 显示隐藏 display:none 适用于频繁切换
v-if="flag" 显示隐藏 创建/移除元素 条件渲染 data:{ flag:true }

v-if v-else v-else-if

<div id="app">
  <div v-if="gender==='male'">male</div>
  <div v-else="gender==='female'">female</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      gender: "male",
    },
  });
</script>

v-on 监听事件

<!-- v-on:click='functionName' 简写：@click="cnt++" -->

<div id="app">
  <button @click="cnt--">-</button>
  <span>{{cnt}}</span>
  <button @click="cnt++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      gender: "male",
      cnt: 100,
    },
  });
</script>

<div id="app">
  <button @click="cnt--">-</button>
  <span>{{cnt}}</span>
  <button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      gender: "male",
      cnt: 100,
    },
    methods: {
      add() {
        this.cnt++;
      },
    },
  });
</script>

v-on 参数传递：v-on:click=“fn(arg1,arg2…)”

v-bind 动态渲染

v-bind:attr=“…”

简写：：attr=“…”

<div id="app">
  <img :src="imgUrl" />
</div>

<div id="app">
  <button v-show="index>0" @click="index--">pre</button><br />
  <img :src="list[index]" width="200px" height="200px" alt="" />
  <button v-show="index<list.length-1" @click="index++">next</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      index: 0,
      list: ["../img/1.webp", "../img/2.webp", "../img/3.webp"],
    },
    methods: {},
  });
</script>

data:{
    imgUrl:'.../..'
}

v-for 多次渲染元素

v-for=“(item,index) in arr” :key=“item.id”
item 每一项 index 数组
key 给元素添加唯一标识

<div id="app">
  <ul>
    <li v-for="item in arr">{{ item }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      arr: ["apple", "orange", "watermalen"],
    },
  });
</script>

v-model 表单元素双向绑定可以快速获取/设置表单元素内容

v-model="变量"

this.todoName.trim() === ‘’ 判断输入是否为空

v-model="username"
data:{
    username:''
}

6.指令修饰符

@keyup.enter
v-model.trim
v-model.number

@event.stop
@event.prevent

7.v-bind 对样式的操作

:class="{class1:boolean,class2:boolean}"
:class="[class1,class2]"

:style="{cssAttributeName:cssAttribute}"

8.v-model 对其他表单操作

对select的value跟option对应

9.计算属性 Computed

有缓存，method 中的计算没有缓存

先声明，后使用

声明在computed中

使用：{{}}

9.1 计算属性完整写法 Get,Set

computed:{
  Name:{
    get(){
      return ..
    },
    set(修改的值){
      ..
    }
  }
}

10.监听 Watch

watch:{
  obj(newValue[,oldValue]){
    ...
  },
  'obj.innerAttribute'(newValue){
    ...
  }
}

Alexmaodali

关注

18
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue std guide

v-on 参数传递：v-on:click=“fn(arg1,arg2…this.todoName.trim() === ‘’ 判断输入是否为空。有缓存，method 中的计算没有缓存。item 每一项 index 数组。简写：：attr=“…key 给元素添加唯一标识。
复制链接

扫一扫