014 Vue学习笔记1----Vue及Node、NPM

1.前端开发模式的发展过程

(1)静态页面

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。

(2)异步刷新，操作DOM

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

ajax盛行：

2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。

(3)MVVM，关注模型和视图

2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

基于事件循环的异步IO
单线程运行，避免多线程的变量同步问题
JS可以编写后台代码，前后台统一编程语言

node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

随后，在node的基础上，涌现出了一大批的前端框架：

(4)MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

2.Vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。

vue中文官网：https://vuejs.bootcss.com/v2/guide/

3.Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

(1)下载Node.js

http://nodejs.cn/

切换到下载栏，下载

点击如下安装包，下一步安装即可。

完成以后，在控制台输入：

node -v

看到版本信息：

(2)NPM

Node自带了NPM了，在控制台输入npm -v查看：

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm use taobao来指定要使用的镜像源：

然后通过nrm test npm来测试速度：

4.vue快速入门

(1)创建工程

创建一个新的空工程：

然后新建一个module：

(2)安装vue

使用npm安装。

在idea的左下角，有个Terminal按钮，点击打开控制台：

进入vue_start目录，先输入：npm init -y 进行初始化

安装Vue，输入命令：npm install vue --save

然后就会在vue_start目录发现一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

(3)入门案例

<1>html模板

在vue_start目录下新建一个HTML

<2>vue声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
    <div id="app">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "lucky"
            }
        }
    )
</script>
</html>

<3>双向绑定和事件处理

- 我们在data添加了新的属性：num
- 在页面中有一个input元素，通过v-model与num进行绑定。
- 同时通过{{num}}在页面输出

我们在页面添加一个按钮：

<input type="button" value="点我啊" v-on:click="num++">

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

完整代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
    <div id="app">
        <!--双向绑定，通过v-model操作-->
        <input type="text" v-model="num">
        <!--定义一个事件，通过v-on:事件名=js表达式-->
        <input type="button" value="点我啊" v-on:click="add">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                }
            }
        }
    )
</script>
</html>

效果图：

5.vue实例

(1)创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

// 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100
            }
        }
    )

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods

(2)模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。
例如一段html模板：

<div id="app">
    
</div>

然后创建Vue实例，关联这个div

const vm = new Vue({
    el:"#app"
})

Vue就可以基于id为app的div元素作为模板进行渲染了。

(3)数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

const app = new Vue({
    el:"#app",
    data:{
        name:"刘昊然"
    }
})

- name的变化会影响到input的值
- input中输入的值，也会导致id为app的div中的name发生改变

(4)方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

<div id="app">
        <!--双向绑定，通过v-model操作-->
        <input type="text" v-model="num">
        <!--定义一个事件，通过v-on:事件名=js表达式-->
        <input type="button" value="点我啊" v-on:click="add">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>
    </div>

js:

<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                }
            }
        }
    )
</script>

(5)生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

<1>生命周期

<2>钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.onload=function({.,.})
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

6.指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

(1)插值表达式

<1>花括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

注意：花括号只能在标签内容处使用，标签的属性上禁止使用。

示例：

HTML：

<div id="app">{{name}}</div>

JS:

const app = new Vue({
    el:"#app",
    data:{
        name:"Jack"
    }
})

(2)v-model

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。在表单元素中使用。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
    <div id="app">
        <!--双向绑定，通过v-model操作-->
        <input type="text" v-model="num">
        <!--定义一个事件，通过v-on:事件名=js表达式-->
        <input type="button" value="点我啊" v-on:click="add">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>

        <input type="checkbox" v-model="language" value="Java" />Java<br/>
        <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
        <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
        <h1>
            你选择了：{{language.join(',')}}
        </h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: []
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                }
            },

        }
    )
</script>
</html>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型
radio对应的值是input的value值
text 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

效果图：

(3)v-on

<1>基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

html:

<input type="button" value="点我啊" v-on:click="add">

js:

<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: []
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                }
            },

        }
    )
</script>

事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

<2>事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素(了解)
.prevent：阻止默认事件发生(掌握)
.capture：使用事件捕获模式(了解)
.self：只有元素自身触发事件才执行。(了解)
.once：只执行一次(了解)

原代码：

<button v-on:contextmenu="num++">增加一个</button>

添加prevent属性后：

<!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu="num++">增加一个</button>

效果图分析：

未添加prevent的代码，右击按钮，会出现弹窗。

添加prevent的代码，右击按钮，不会出现弹窗。

<3>按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

示例：

html:

<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.13表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.13="submit">

js:

<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: []
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                },
                submit(){
                    console.log("您已提交")
                }
            },

        }
    )
</script>

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：

.enter*
.tab
.delete (捕获“删除”和“退格”键)

示例：

<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.enter表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.enter="submit">

(4)v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

<1>遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
    <div id="app">
        <!--双向绑定，通过v-model操作-->
        <!--v-on:keyup.enter表示回车键按下-->
        <input type="text" v-model="num" v-on:keyup.enter="submit">
        <!--定义一个事件，通过v-on:事件名=js表达式-->
        <input type="button" value="点我啊" v-on:click="add">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>

        <input type="checkbox" v-model="language" value="Java" />Java<br/>
        <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
        <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
        <h1>
            你选择了：{{language.join(',')}}
        </h1>

        <!--右击事件，并阻止默认事件发生-->
        <button v-on:contextmenu="num++">增加一个</button>

        <ul>
            <li v-for="user in users">
                {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: [],
                users:[
                    {name:'柳岩', gender:'女', age: 21},
                    {name:'峰哥', gender:'男', age: 18},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ]
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                },
                submit(){
                    console.log("您已提交")
                }
            },

        }
    )
</script>
</html>

效果图：

<2>遍历角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例：

<li v-for="(user, index) in users">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
 </li>

效果图：

<3>遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
    <div id="app">
        <!--双向绑定，通过v-model操作-->
        <!--v-on:keyup.enter表示回车键按下-->
        <input type="text" v-model="num" v-on:keyup.enter="submit">
        <!--定义一个事件，通过v-on:事件名=js表达式-->
        <input type="button" value="点我啊" v-on:click="add">
        <!--花括号：js表达式-->
        <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>

        <input type="checkbox" v-model="language" value="Java" />Java<br/>
        <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
        <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
        <h1>
            你选择了：{{language.join(',')}}
        </h1>

        <!--右击事件，并阻止默认事件发生-->
        <button v-on:contextmenu="num++">增加一个</button>

        <ul>
            <li v-for="(user, index) in users">
                {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>

        <ul>
            <li v-for="(value, key, index) in user">
                {{index + 1}}. {{key}} - {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: [],
                users:[
                    {name:'柳岩', gender:'女', age: 21},
                    {name:'峰哥', gender:'男', age: 18},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ],
                user:{name:'柳岩', gender:'女', age: 21}
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                },
                submit(){
                    console.log("您已提交")
                }
            },

        }
    )
</script>
</html>

效果图：

(5)v-if和v-show

<1>基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

注意：v-if和v-show的效果是一样的。我们优先使用v-if

语法：

v-if="布尔表达式"

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="show = !show">点我呀</button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    </h1>
    <h1 v-show="show">
        看到我啦？！show
    </h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
</script>
</html>

效果图：

<2>与v-for结合使用

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

html:

 <ul>
        <li v-for="(user, index) in users" v-if="user.gender == '女'">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
 </ul>

Js:

<script>
    // 创建vue实例
    const app=new Vue(
        {
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data:{      // 渲染页面需要的数据
                name: "刘昊然",
                num: 100,
                language: [],
                users:[
                    {name:'柳岩', gender:'女', age: 21},
                    {name:'峰哥', gender:'男', age: 18},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ],
                user:{name:'柳岩', gender:'女', age: 21}
            },
            methods: {
                add:function () {
                    //this代表当前的实例
                    this.num=this.num+2;
                },
                submit(){
                    console.log("您已提交")
                }
            },

        }
    )
</script>

效果：

只显示女性用户信息

<3>v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        看到我啦？！if
    </h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！if 0.25
    </h1>
    <h1 v-else>
        看到我啦？！else
    </h1>
</div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            random: 1  //设置random的初始值
        }
    })
</script>
</html>

效果图：

(6)v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色-->
    <div id="app">
        <input type="text" v-model="store">
        <input type="button" v-bind:class="{active:store>0}" value="加入购物车">
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            store: 0
        }
    })
</script>
</html>

效果图：

注意：v-bind:class可以简写为:class

(7)计算属性

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色-->
    <div id="app">
        <input type="text" v-model="store">
        <input type="button" v-bind:class="{active:store>0}" value="加入购物车">
        <h1>您的生日是：{{birth}} </h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            store: 0,
            birthday:1429032123201 // 毫秒值
        },
        computed:{
            birth(){// 计算属性本质是一个方法，但是必须返回结果
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    })
</script>
</html>

效果图：

posted @ 2019-09-06 09:34 雨后观山色阅读(323) 评论(0) 编辑收藏举报

刷新页面返回顶部

雨后观山色

014 Vue学习笔记1----Vue及Node、NPM

公告