[JavaScript知识库]Vue第二天学习记录（基础知识）

vue是什么

1.构建用户界面

• 用vue给页面中注入数据

?2.框架

• 框架是一套现有的解决方案，程序员遵循框架的规范，去编写业务代码
• 包含vue指令，组件（对ui结构的复用），路由，vueX，vue组件库

vue的两个特性

1.数据驱动视图

• 数据的更新会驱动视图自动更新（只需要处理数据，就能够把视图自动渲染出来）

2.双向数据绑定

在网页中，Ajax负责提交数据，form表单负责采集数据

• js的变化，会自动渲染到界面上
• 页面上的数据发生变化，会被vue自动获取，并且更新到js数据中?

注意：数据驱动视图和双向数据绑定的基本原理是MVVM（model:数据源 view：视图，DOM结构，vue中el控制的区域 vm：view-model，vue的实例）

vue指令

1. 内容渲染指令：

1. v-text：会覆盖原有的元素（不推荐）
2. {{}}：插值表达式，不会覆盖原有的内容，作为内容的占位符
3. v-html：可以把带有标签的字符串，渲染到页面

2.属性绑定指令

v-bind是属性绑定指令

注意，插值表达式不能用在属性节点中，只能存在内容节点中。所以需要属性指令。

1. 在vue中，可以使用指令为元素动态绑定值。
2. 简写是英文':'

   例如:
   <button v-bind:click="onClick"></button>
   <button :click="onClick"></button>

   3.在使用v-bind时候，元素可以使用字符串拼接，例如：

   <p :titile="'box'+index"></p>

?3.事件绑定指令

• v-on：简写为@
• 语法格式

      <div id="app">
            <p>count:{{count}}</p>
            <button @:click="addCount">+1</button>
      </div>

    const vm = new Vue({
                el: "#app",
                data: {
                    count:0
                }
                methods: {
                     addCount () {
                        this.count++;
                    }
                }
            })

• $event：如果默认的事件参数被覆盖，则可以手动传递一个$event原生事件对象

如果函数没有参数，默认会给一个事件参数，且属性中不需要加上括号。

4. 事件修饰符

①prevent事件

在事件中可以使用preventDefault()阻止默认事件的传递

  addCount (e) {
    e.preventDefault();
    console.log(e);
  }
               

在属性中可以使用prevent阻止

<button v-on:click.prevent="addCount">+1</button>

②stop事件

在事件中可以使用stopPropagation()阻止冒泡

在属性中可以使用stop阻止，语法同上。

5. 按键修饰符

@keyup:esc ：按下esc的时候触发事件

@keyup:enter?：按下enter的时候触发事件

6. 双向绑定指令：

v-model：在不操作DOM的时候，快速获取表单数据。

v-model在表单元素中才能使用，因为该指令只有在用户能操作数据的时候才有意义。

能使用的元素有:input, select, textarea

?v-bind是单向绑定，数据源改变会重新渲染界面，页面数据更改不会影响数据源

7. 双向绑定指令修饰符

v-model.number=‘’? ?--输入的文本只能是数字

v-model.trim=''? --输入数据自动清除首尾空格

v-model.lazy=‘’ --失去焦点的时候才会更新数据源

8. 条件渲染指令

开发者按需展示和隐藏元素

v-if: 根据条件，动态移除和创建元素

缺点:消耗性能

v-show: 根据条件，改变disiplay的值进行隐藏和显示

缺点：在后期不需要展示该元素的时候，用v-if更好

在开发中，不考虑性能问题推荐用v-if！！！！！

v-else-if和v-else必须和v-if配套使用，不然不会被识别

?9. v-for循环

<li v-for =“item in list" >{{item.username}</li>
<li v-for =“(item, index) in list" >{{item.username}</li>

?index不使用的时候可以隐藏。

①使用v-for的时候必须要添加key属性。(提高性能，防止列表状态紊乱)。

②key属性必须使用字符串或者数字。

③key值不能重复，因此不能使用index作为key值，因为index不会和数据进行绑定，推荐使用id绑定。