Vue2(笔记02) - Vue核心 - 初识Vue、模板语法、数据绑定

1.1 初识Vue

先引入 Vue.js ；

<script src="./res/vue.js">script>

是开发版本的 vue.js 会有报错提示，比较友好；生产环境中使用 vue.min.js

先写个容器：

<div id="root">
    <h1>Hello {{name}}h1>
div>

再写一段Vue：

// 创建vue实例
const vm = new Vue({
    el: '#root',  // 用于指定当前 Vue实例为哪个容器服务，值通常为 css选择器字符串
    data: {       // data 用于存储数据，供 el 所指定容器使用，仍然是配置对象的方式；
        name:"Vue"
    }
});

效果：

左边显示了页面效果，右边显示 ​​Vue Devtools​​ 插件的效果；在插件中，可以修改 Vue 的值，会在左侧页面中同步修改，非常方便；

注意： 插件里的 Root 是指根，跟页面中的 #root 没关系；

【代码解析】：

1）el ，是 element 的缩写；

用于跟容器中的 ​​#root​​  绑定，一个 Vue 容器只会被一个 Vue 实例接管；

2）data ，存储实例对象的各种属性

可供容器中使用；

3）{{name}} ，是Vue的插值语法方式，固定写法，用在标签内；

同时 ​​{{}}​​​ 也是JS表达式，可以执行有值的运算，如：​​{{1+3}}​​​ 或​​{{Date.now()}}​​；

还可以这样：​​{{name.toUpperCase()}}​​，输出变大写了；

控制台修改 data 的属性值，前端界面上会自动更新；

【总结】：

1）Vue 本质是一个构造函数，实例化对象要 new，所有属性参数都放在配置对象中;

2）root 容器里的代码依然符合 html 规范，只是混入了 Vue 语法；

3）root 容器里的代码被称为 “Vue模板” ；

4）Vue实例和容器是一一对应的；

5）开发中只有一个Vue实例，并且会配合着组件一起使用；

6）​​{{XXX}}​​ 中的XXX要写JS表达式，且XXX可以自动读取到 data 中的所有属性；

7）一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

1.2 模板语法

Vue模板语法分 插值语法 和 指令语法；

写个插值语法和指令语法：

<div id="root">
    <h1>插值语法h1>
    <h3>你好，{{name}}h3>
    <hr>
    <h1>指令语法h1>
    <a v-bind:href="url">51CTO首页a>
div>

使用 ​​v-bind:​​给 href 这个标签属性绑定了 url，这时的 url 就成了 表达式 ，相当于读取 url 这个变量，这个变量的值存在 data 中，已经写好了；

注意：写在引号中的 url 被 v-bind 绑定后，就不在是字符串了，而是变成JS表达式；

new Vue({
    el: '#root',
    data: {
        name: "Jack",
        url:"https://www.51cto.com/"
    }
});

页面效果：

元素结果：

【代码解析】：

Vue 里的指令语法都是 ​​v-xxx​​​ 的形式，如： ​​v-if​​​ ，​​v-modle​​​ ，​​v-on​​ 等；

​​v-bind​​ 也可以绑定其他属性，并不是只有 href，如：title 或自定义属性；

<a v-bind:href="url" v-bind:title="slogan" v-bind:date-index="index">51CTO首页a>
//在data中也定义个slogan和index属性
data:{
  //...
  slogan:"技术成就梦想",
  index:66
}

​​v-bind​​​ 可以简写成​​:​​，简化代码量；

<a v-bind:href="url" v-bind:title="slogan" v-bind:date-index="index">51CTO首页a>

<a :href="url" :title="slogan" :data-index="index">51CTO首页a>

【代码示例】：

上面的写法再变一变：HTML和Vue分开写了；

<div id="root">
    <h1>插值语法h1>
    <h3>你好，我叫{{name}}({{age}}岁),在学习{{course}}。h3>
    <hr>
    <h1>指令语法h1>
    <a :href="webSite.url" :title="webSite.slogan" :data-index="webSite.index">{{webSite.name}}首页a>
div>

new Vue({
    el: '#root',
    data: {
        name: "Jack",
        age: 28,
        course: "Vue",
        webSite: {    // 分层更清晰，但调用时注意 webSite.name
            name: "51CTO",
            slogan: "技术成就梦想",
            url: "https://www.51cto.com/",
            index: 66
        }
    }
});

如果要调用的属性比较多，尤其是重命的情况，可以多级分层出来，单独写在配置对象中；

注意在指令绑定时，要写成 ​​​webSite.name​​ 的形式，把层级体现出来；

看下结果：

【总结】：

Vue 模板语法有2大类：

1）插值语法：

功能：用于解析标签体内容；

写法：​​{{xxx}}​​，xxx 是 JS 表达式，且可以直接读取到 data 中的所有属性；

2）指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）; 

举例： ​​v-bind:href="url"​​​  或简写成  ​​:href="url"​​ ， xxx 同样要写成JS表达式，且可以直接读取到 data 中的所有属性；

备注：Vue 中有很多的指令，且形式都是： ​​v-xxx​​ ，此处只是拿 v-bind 举个例子；

1.3 数据绑定

先看代码：

<div id="root">
    单向数据绑定：<input type="text" v-bind:value="name" /><br>
    双向数据绑定：<input type="text" v-model:value="name" />
div>

​​v-bind:​​ 绑定的 value 是单向数据绑定；不能通过页修改同步 name 的值；

​​v-model:​​ 绑定的 value 是双向数据绑定；可以在页面上修改，且数据同步到 data 里的 name；

new Vue({
    el: '#root',
    data: {
        name: "Vue"
    }
});

双向数据绑定：

在使用双向数据绑定 ​​v-model:value ​​​的 input 里，把 Vue 改成了 Vue 2.0 后，单向数据绑定 ​​v-bind:value​​ 的 input 和 插件中显示的 data 数据也都同步成了 Vue 2.0；

注意：修改了双向数据绑定的 input 的值后，也会连锁影响到 单向数据绑定的 input ，因为他们调用的都是 data 中的 name ，Vue 让他们同步更新了；

不是所有标签属性都支持双向数据绑定，因为​​ v-model ​​只能应用在表单类元素（输入类元素）上；

<h1 v-model:title="name">helloh1>   

把 ​​v-model​​ 写在非表单类元素上会报错，你想，一个非表单交互类的元素也没必要双向绑定是吧；

表单类元素都有哪些： 单行文本、单选、双选、下拉菜单、多行文本等元素，这些元素都有个 ​​value​​ 值属性，v-model 也是主要绑定在 value 属性上；

【总结】：

Vue 中有2种数据绑定的方式： 单向绑定和双向绑定；

1）单向绑定(v-bind)：数据只能从 data 流向页面；

2）双向绑定(v-model)：数据不仅能从 data 流向页面，还能从页面流向 data ；

备注：

1、双向绑定一般都应用在表单类元素上（如：input,select等）；

2、​​v-model:value​​​ 可以简写为 ​​v-model​​ ， 因为 v-model 默认收集的就是 value 值；

<div id="root">
    单向数据绑定：<input type="text" :value="name" /><br>
    双向数据绑定：<input type="text" v-model="name" />
div>

两种简写方式很不一样，初学需要强记一下；

1.4 el 与 data 的两种写法

el 和 data 的第一种写法；

<div id="root">
    <h1>Hello {{name}}h1>
div>

const vm = new Vue({
    el:"#root",
    data:{
        name:"Vue"
    }
});
console.log(vm);   // 输出这个对象

这么写能正常输出内容；

第一次看这个实例化的对象 vm ：长这个样子；

看到一个 ​​name: "Vue"​​ ，输出到页面上去了，还有那么些以 $开头的方法，目前都还没学到。

这次先看一下 Vue 这个构造函数原型上的一个方法：​​$mount()​​，挂载; 

el 和 data 的第二种写法：

const vm = new Vue({
    data:{
        name:"Vue"
    }
});
vm.$mount("#root");    // 用这种方法替代 el:"#root"

使用实例化对象 vm 的 ​​$mount()​​​ 方法，也可以指定容器，效果跟 ​​el:"#root"​​ 一样，使用哪种指定容器的方法都可以。

有时 ​​$mount()​​ 方法显得更灵活一些： 

const vm = new Vue({
    data:{
        name:"Vue"
    }
});
setTimeout(() => {
    vm.$mount("#root");  // 写在定时器里，延迟渲染页面
}, 2000);

把 ​​vm.$mount("#root");​​ 指定容器的代码写在 定时器 中，效果是等待 2S 后再把 Vue 渲染到页面上；

data 之前写成的对象式，还有一种写法叫函数式：以后学习组件，就必须要用这种写法了；

const vm = new Vue({
    data:function(){   // 用一个普通函数返回对象的方式替代原来 配置对象； 
        console.log('@@',this);   // this 指向 Vue 的实例对象；
        return {            
            name:"Vue"
        }
    }
});
vm.$mount("#root");

这个data函数，必须返回一个对象；这个data函数里的 this 是指当前 Vue 的实例对象。 

注意：这个data函数，必须写成普通函数形式的，这样 this 才会指向 Vue 实例对象，而箭头函数没有自己的 this ，就要往上找到 window，就会有影响；

【总结】：

el 与 data 的2种写法： 

1）el 的2种写法：

1、new Vue 时候配置 el 属性；

2、 先创建 Vue 实例，随后再通过​​ vm.$mount("#root")​​ 指定 el 的值；

2）data 的2种写法：

1、对象式；

2、函数式；

如何选择：目前哪种写法都可以，以后学到组件时，data 必须使用函数式，否则会报错；

3）一个重要原则：

由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 指向就不再是 Vue 实例了；