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>

效果图：

014 Vue学习笔记1----Vue及Node、NPM的更多相关文章

【Vue学习笔记】—— vue的基础语法 { }
学习笔记作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
vue学习笔记(二)vue的生命周期和钩子函数
前言通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
Vue学习笔记之Vue的使用
0x00 安装对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

电脑按键混乱，好像被锁定了Alt键
在知乎上找到一篇文章,https://zhuanlan.zhihu.com/p/34835461 解决了我的问题,解决办法是按住左右两边的alt+shift+ctrl
Hibernate的批量查询——原生sql查询
1.查询所有的学生信息: (1)查询结果中,一条信息放入到一个数组中,从list集合中取出数组,并对数组进行遍历. public class GeneratorTest { public static ...
CENTOS 7 下安装 REDIS 5.0.6 完整步骤
第一步:下载redis安装包 wget http://download.redis.io/releases/redis-5.0.6.tar.gz 第二步:解压压缩包 tar -zxvf redis ...
SpringCloud基本模块分配搭建以及负载均衡
springcloud是基于springboot的一套微服务的解决方案,springboot可以快速构建单个应用服务,而springcloud没有重复造轮子而是将现有的技术(服务发现,负载均衡等)整合 ...
ffmpeg结合SDL编写播放器（二）
我们将对帧数据做一些处理,比如将每一帧的图像转为jpg或者bmp或者ppm等格式保存下来. 举例:在ffmpeg-2.8.8文件夹下编写test.c程序 /* test.c */ #include& ...
Python-DDT框架
Install pip install ddt 实例 import unittest from ddt import ddt, data, unpack @ddt class MyTestCase(u ...
oracle 如何通过分组计数查出重复数据？
1.情景展示现在,机构表数据中机构名称有重复数据,如何筛选出来? 2.分析第一步:统计是否存在重复数据. 方式一: 方式二: 说明表中确实存在重复数据第二步:统计重复次数及机构名称. 需要通 ...
GlusterFS常用设置命令
可信存储池(Trusted Storage Pool)创建存储池例如要创建一个包含3个服务器的存储池,则需要从第一个服务器server1中把另外两个服务器加入存储池中:# gluster peer p ...
centOS7开启ssh免密登陆
一.登陆服务器生成ssh-key 二.把ssh-key复制到被登陆机器上三.设置权限 root# .ssh 文件夹权限 root# .ssh/authorized_keys 文件权限四.测试是否正 ...
sql查询条件参数为空
查询某些值为空的数据 select * from usertable where name is null or page is null

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

014 Vue学习笔记1----Vue及Node、NPM的更多相关文章

随机推荐

热门专题