其他分享
首页 > 其他分享> > vue基础知识

vue基础知识

作者：互联网

vue基础

数据的页面展示{{}} ,v-once,v-html

数据绑定属性v-bind,简写用:

事件调用：v-on,简写：@

V-if与v-show，异同

v-for 用in和of都一样，循环数组的时候，可以有两个参数，循环对象时，可以有三个参数

style与class绑定

计算属性

表单双向绑定

vue 指令

 

1. 内容渲染指令

  1. v-text 指令的缺点：会覆盖元素内部原有的内容！

  2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

  3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

 

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

 

3. 事件绑定

  1. v-on: 简写是 @

  2. 语法格式为：

    <button @click="add"></button>
    ​
    methods: {
       add() {
                // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
                this.count += 1
       }
    }

  3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

    <button @click="add(3, $event)"></button>
    ​
    methods: {
       add(n, e) {
                // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
                this.count += 1
       }
    }

  4. 事件修饰符：

    • .prevent

      <a @click.prevent="xxx">链接</a>

    • .stop

      <button @click.stop="xxx">按钮</button>

       

4. v-model 指令

  1. input 输入框

    • type="radio"

    • type="checkbox"

    • type="xxxx"

  2. textarea

  3. select

 

5. 条件渲染指令

  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好

  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

    • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

 

v-if 指令在使用的时候，有两种方式：

  1. 直接给定一个布尔值 true 或 false

    <p v-if="true">被 v-if 控制的元素</p>

  2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

    <p v-if="type === 'A'">良好</p>

     

过滤器

 

过滤器的注意点

  1. 要定义到 filters 节点下，本质是一个函数

  2. 在过滤器函数中，一定要有 return 值

  3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值

  4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

 

watch 侦听器

 

侦听器的格式

  1. 方法格式的侦听器

    • 缺点1：无法在刚进入页面的时候，自动触发！！！

    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

  2. 对象格式的侦听器

    • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！

    • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

 

计算属性

特点：

  1. 定义的时候，要被定义为“方法”

  2. 在使用计算属性的时候，当普通的属性使用即可

好处：

  1. 实现了代码的复用

  2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

标签：绑定,元素,基础知识,侦听器,vue,指令,过滤器,属性
来源： https://www.cnblogs.com/lcw0/p/16250413.html