day03---Vue(03)

1、介绍

一、Vue.js 是什么

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。
官方网站：https://cn.vuejs.org

二、初始Vue.js

首先引入vue.min.js到项目文件目录下。
建立 demo.html

Document
            {{ message }}

这就是声明式渲染：Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操做，例如jQuery中，咱们须要先找到div节点，获取到DOM对象，而后进行一系列的节点操做

三、在vs code中建立代码片断

文件 =>  首选项 => 用户代码片断 => 新建全局代码片断/或文件夹代码片断：vue-html.code-snippets

注意：制做代码片断的时候，字符串中若是包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "Document",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
        ],
        "description": "my vue template in html"
    }
}

2、基本语法

一、基本数据渲染和指令

你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可使用 v-bind指令，它的简写的形式就是一个冒号（:）
建立 01-基本数据渲染和指令.html

Document{{ content }}{{ content }}

二、双向数据绑定

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
建立 02-双向数据绑定.html

Document您要查询的是：{{searchMap.keyWord}}

三、事件

需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增长 result，增长 methods节点 并定义 search方法。
html中增长 button 和 p。
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中。
建立 03-事件.html

Document查询您要查询的是：{{searchMap.keyWord}}{{result.title}}查询

四、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件本来的默认行为

建立 04-修饰符.html

Document保存

五、条件渲染

v-if：条件指令
建立 05-条件渲染.html
注意：单个复选框绑定到布尔值

Document是否赞成1{{ok}}赞成查看协议。。。。。。。。。。是否赞成2{{ok}}赞成查看协议。。。。。。。。。。

v-show：条件指令
使用v-show完成和上面相同的功能

 show：Lorem ipsum dolor sit amet.no

（1）v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。

（2）v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

（3）相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

（4）通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

六、列表渲染

v-for：列表循环指令
建立 06-列表渲染.html

Document{{ n }}{{ n }} - {{ index }}-->{{index}}{{item.id}}{{item.username}}{{item.age}}