前端学习第九天

一、Vue简介

Vue是前端优秀框架，是一套用于构建用户界面的渐进式框架。

安装Vue工具——Vue CLI

cnpm install -g @vue/cli

创建一个项目

vue create vue-demo

vue项目名称不存在大写，可以用-分开 

选择一个开发目录，打开它的集成终端，输入命令，创建一个项目，出现如下信息：

选择第三个，回车后选择Babel和Progress Web App Support两个选项即可，把Linter/Formatter取消掉。

运行项目

第一步：进入项目根目录cd vue-demo

第二步：运行npm run serve启动项目

安装Vue高亮插件

VSCode中安装vetur（Vue2版本）或者volar（Vue3版本）即可 

二、模板语法

文本

数据绑定最常见的形式就是使用双大括号语法的文本插值，下面的函数名为data，内容有错

原始HTML

双括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需使用v-html命令

属性Attribute

使用v-bind指令，也可以简写成：

使用JavaScript表达式

双括号里还可以这样写，但每个绑定都只能包含单个表达式

{{ number + 1}}

{{ ok ? 'YES' : 'NO'}}

{{ message.split('').reverse().join('') }}

三、条件渲染

v-if

 v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染

<p v-if="flag">条件渲染</p>

data(){
    return {
      flag:true
    }
  }

v-else 

表示v-if的else块

v-show

另一个用于条件性展示元素的选项

v-if和v-show区别

v-if如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真，才会开始渲染条件块。DOM中没有此元素。

v-show不管初始条件是什么，元素总是会被渲染，并只是简单地基于CSS进行切换。

v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

四、列表渲染

用v-for把一个数组显示在页面上

用v-for指令基于一个数组来渲染一个列表。v-for需使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。和for of函数类似。

维护状态

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并确保它们在每个索引位置正确渲染。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key attribute：

<div v-for="(item,index) in items":key="item.id|index">
    //内容
</div>

五、事件处理

 监听事件

v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时执行一些JavaScript。用法为：v-on:click="methodName"或用快捷方式@click="methodName"

事件处理方法

v-on可以接收一个需要调用的方法名称。

<button @click="greet">Greet</button>


methods: {
    greet(event) {
        // event是原生 DOM event
        if(event){
            alert(event.target.tagName)
        }
    }
}

 内联处理器中的方法

可以直接叫“事件传递参数”

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>



methods: {
    say(message) {
        alert(message)
    }
}

 六、表单的输入绑定

 v-model指令在表单<input>,<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件来更新数据。

<input v-model="message" placeholder="edit me" />
<p>Message is:{{ message }}</p>


data(){
    return {
        message:""
    }
}

 修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加lazy修饰符，从而转为在change事件之后进行同步

.trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符

<input v-model.trim="message" />