一、安装node和npm
1、node.js
1、下载地址
https://nodejs.org/en/
完成以后，在控制台输入：
node -v
2、npm
我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g
2、
npm init -y
npm install vue --save
2、入门案例
1、vue声明式渲染
<body>
<div id="app">
<h2>{{name}}，非常帅！！！</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "峰哥"
}
});
</script>
-
-
然后构造函数接收一个对象，对象中有一些属性：
-
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
-
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
-
name：这里我们指定了一个name属性
-
-
-
页面中的
h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性
2、双向绑定
我们对刚才的案例进行简单修改：
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}}，非常帅！！！有{{num}}位女神为他着迷。
</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app", // el即element，该vue实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "峰哥",
num: 5
}
});
</script>
-
-
在页面中有一个
input元素，通过v-model与num进行绑定。 -
同时通过
{{num}}在页面输出
3、事件处理
我们在页面添加一个按钮：
<button v-on:click="num++">点我</button>
-
-
普通click是无法直接操作num的。
三、vue实例
1、创建vue实例
var vm = new Vue({ // 选项 })
-
el
-
data
-
methods
2、模板或元素
我们可以通过el属性来指定。
例如一段html模板：
<div id="app"> </div>
然后创建Vue实例，关联这个div
var vm = new Vue({ el:"#app" })
html：
<div id="app"> <input type="text" v-model="name"/> </div>
js:
var vm = new Vue({ el:"#app", data:{ name:"刘德华" } })
-
-
input中输入的值，也会导致vm中的name发生改变
4、方法
html:
<div id="app"> {{num}} <button v-on:click="add">加</button> </div>
js:
var vm = new Vue({ el:"#app", data:{ num: 0 }, methods:{ add:function(){ // this代表的当前vue实例 this.num++; } } })
5、钩子函数
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：
// 创建vue实例 var app = new Vue({ el: "#app", // el即element，该vue实例要渲染的页面元素 data: { // 渲染页面需要的数据 name: "峰哥", num: 5 }, methods: { add: function(){ this.num--; } }, created: function () { this.num = 100; } });
6、this对象
我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this
methods: { add: function(){ this.num--; console.log(this); } },
控制台的输出：
四、指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如我们在入门案例中的v-on，代表绑定事件。
1、插值表达式
1、花括号
{{表达式}}
说明：
-
该表达式支持JS语法，可以调用js内置函数（必须有返回值）
-
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
-
可以直接获取Vue实例中定义的数据或函数
示例：
HTML：
<div id="app">{{name}}</div>
JS:
var app = new Vue({ el:"#app", data:{ name:"Jack" } })
2、插值闪烁
说明：
-
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
-
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:
<div id="app"> v-text:<span v-text="hello"></span> <br/> v-html:<span v-html="hello"></span> </div>
JS:
var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是峰哥</h1>" } })
4、v-model
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
-
input
-
select
-
textarea
-
checkbox
-
radio
-
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
5、v-on
语法：
v-on:事件名="js片段或函数名"
示例：
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="num++">增加一个</button><br/>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button v-on:click="decrement">减少一个</button><br/>
<h1>有{{num}}个女神迷恋峰哥</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:100
},
methods:{
decrement(){
this.num--;
}
}
})
</script>
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
-
.stop：阻止事件冒泡到父元素 -
.prevent：阻止默认事件发生* -
.capture：使用事件捕获模式 -
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行） -
.once：只执行一次
阻止默认事件
<div id="app"> <!--右击事件，并阻止默认事件发生--> <button v-on:contextmenu.prevent="num++">增加一个</button> <br/> <!--右击事件，不阻止默认事件发生--> <button v-on:contextmenu="decrement($event)">减少一个</button> <br/> <h1>有{{num}}个女神迷恋峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 100 }, methods: { decrement(ev) { // ev.preventDefault(); this.num--; } } }) </script>
7、按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
-
.enter* -
.tab -
.delete(捕获“删除”和“退格”键) -
.esc -
.space -
.up -
.down -
.left -
8、组合按键
-
.ctrl -
.alt -
.shift
例如：
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
9、v-for
语法：
v-for="item in items"
-
items：要遍历的数组，需要在vue的data中定义好。
-
item：迭代得到的数组元素的别名
示例：
<div id="app"> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { users:[ {name:'柳岩', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ] }, }) </script>
示例：
<div id="app"> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'峰哥', gender:'男', age: 18} } }) </script>
key：
10、v-if和v-show
1）基础使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染
语法：
v-if="布尔表达式"
示例：
<div id="app"> <button v-on:click="show = !show">点我呀</button> <br> <h1 v-if="show"> 看到我啦？！ </h1> <h1 v-show="show"> 看到我啦？！show </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { show: true } }) </script>
2）与v-for配合使用
修改v-for中的案例，添加v-if：
<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
3）v-else
<div id="app"> <h1 v-if="Math.random() > 0.5"> 看到我啦？！if </h1> <h1 v-else> 看到我啦？！else </h1> </div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<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> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { random: 1 } }) </script>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
4）v-show
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
示例：
<div id="app"> <!--事件中直接写js片段--> <button v-on:click="show = !show">点击切换</button><br/> <h1 v-if="show"> 你好 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ show:true } }) </script>
11、v-bind
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
<div id="app"> <!--可以是数据模型，可以是具有返回值的js代码块或者函数--> <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { title: "title", } }) </script>
1）绑定class样式
数组方式
我们可以借助于v-bind指令来实现：
<div id="app"> <div v-bind:class="activeClass"></div> <div v-bind:class="errorClass"></div> <div v-bind:class="[activeClass, errorClass]"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { activeClass: 'active', errorClass: ['text-danger', 'text-error'] } }) </script>
对象方式
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
和如下 data：
data: { isActive: true, hasError: false }
结果渲染为：
<div class="static active"></div>
active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。
2）绑定style样式
：
数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
数据：
data: { baseStyles: {'background-color': 'red'}, overridingStyles: {border: '1px solid black'} }
渲染后的结果：
<div style="background-color: red; border: 1px solid black;"></div>
对象语法：
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数据：
data: { activeColor: 'red', fontSize: 30 }
效果：
<div style="color: red; font-size: 30px;"></div>
3）简写
v-bind:class可以简写为:class
12、计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
data:{ birthday:1529032123201 // 毫秒值 }
我们在页面渲染，希望得到yyyy-MM-dd的样式：
<h1>您的生日是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }} </h1>
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
var vm = new Vue({ el:"#app", data:{ birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法，但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay(); } } })
-
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
页面使用：
<div id="app"> <h1>您的生日是：{{birth}} </h1> </div>
13、watch
示例：
<div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"" }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); } } }) </script>
五、组件化
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件
1、全局组件
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 定义全局组件，两个参数：1，组件名称。2，组件参数 Vue.component("counter",{ template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script>
-
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
-
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
-
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
-
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
-
data必须是一个函数，不再是一个对象。
2、组件的复用
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> <counter></counter> <counter></counter> </div>
你会发现每个组件互不干扰，都有自己的count值。怎么实现的？
data: { count: 0 }
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () { return { count: 0 } }
如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！
3、局部组件
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
const counter = { template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } };
然后在Vue中使用它：
var app = new Vue({ el:"#app", components:{ counter:counter // 将定义的对象注册为组件 } })
-
components就是当前vue对象子组件集合。
-
其key就是子组件名称
-
其值就是组件对象名
-
-
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
4、组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
-
页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
-
左侧内容区又分为上下两个组件
-
右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
1）props（父传子）
-
-
子组件通过props接收父组件数据，通过自定义属性的属性名
父组件使用子组件，并自定义了title属性：
<div id="app"> <h1>打个招呼：</h1> <!--使用子组件，同时传递title属性--> <introduce title="大家好，我是锋哥"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("introduce",{ // 直接使用props接收到的属性来渲染页面 template:'<h1>{{title}}</h1>', props:['title'] // 通过props来接收一个父组件传递的属性 }) var app = new Vue({ el:"#app" }) </script>
2）props验证
const myList = { template: '\ <ul>\ <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\ </ul>\ ', props: { items: { type: Array, default: [], required: true } } };
-
这个子组件可以对 items 进行迭代，并输出到页面。
-
props：定义需要从父组件中接收的属性
-
items：是要接收的属性名称
-
type：限定父组件传递来的必须是数组
-
default：默认值
-
required：是否必须
-
-
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
我们在父组件中使用它：
<div id="app"> <h2>已开设如下课程：</h2> <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons --> <my-list :items="lessons"/> </div> var app = new Vue({ el:"#app", components:{ myList // 当key和value一样时，可以只写一个 }, data:{ lessons:[ {id:1, name: 'java'}, {id:2, name: 'php'}, {id:3, name: 'ios'}, ] } })
type类型，可以有：
注意：子组件模板有且只有一个根标签
3）动态静态传递
给 prop 传入一个静态的值：
<introduce title="大家好，我是锋哥"/>
给 prop 传入一个动态的值： （通过v-bind从数据模型中，获取title的值）
<introduce :title="title"/>
静态传递时，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个JavaScript表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:likes="post.likes"></blog-post>
4）子向父的通信：$emit
来看这样的一个案例：
<div id="app"> <h2>num: {{num}}</h2> <!--使用子组件的时候，传递num到子组件中--> <counter :num="num"></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减 template:'\ <div>\ <button @click="num++">加</button> \ <button @click="num--">减</button> \ </div>', props:['num']// count是从父组件获取的。 }) var app = new Vue({ el:"#app", data:{ num:0 } }) </script>
-
子组件接收父组件的num属性
-
子组件定义点击按钮，点击后对num进行加或减操作
我们尝试运行，好像没问题，点击按钮试试：
既然只有父组件能修改，那么加和减的操作一定是放在父组件：
var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } })
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<div id="app"> <h2>num: {{num}}</h2> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div>
在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：
Vue.component("counter", { template:'\ <div>\ <button @click="plus">加</button> \ <button @click="reduce">减</button> \ </div>', props:['count'], methods:{ plus(){ this.$emit("inc"); }, reduce(){ this.$emit("dec"); } } })
-
vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数
六、路由
1、
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网：https://router.vuejs.org/zh-cn/
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
2、快速入门
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:"/login", // 请求路径，以“/”开头
component:loginForm // 组件名称
},
{
path:"/register",
component:registerForm
}
]
})
-
创建VueRouter对象，并指定路由参数
-
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
-
path：路由的路径
-
component：组件名称
-
在父组件中引入router对象：
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router // 引用上面定义的router对象
})
页面跳转控制：
<div id="app">
<!--router-link来指定跳转的路径-->
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<div>
<!--vue-router的锚点-->
<router-view></router-view>
</div>
</div>
-
通过
<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染 -
通过
<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变
注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
事实上，我们总共就一个HTML：index.html
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
浙公网安备 33010602011771号