1. Vue事件
语法：使用v-on指令注册事件
<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
简写方式：<标签 @事件句柄="表达式或者事件处理函数"></标签>
1 <div id="app"> 2 {{num}} 3 <button v-on:click="num++">按钮1</button> 4 <button @click="num++">按钮2</button> 5 <button @click="add">按钮3</button> 6 <button @click="say('nice')">按钮4</button> 7 </div>
1 <script> 2 new Vue({ 3 el:"#app", 4 data:{ 5 num:0 6 }, 7 methods:{ 8 add(){ 9 this.num++; 10 }, 11 say(msg){ 12 console.log("放假真好！" + msg); 13 } 14 } 15 }); 16 </script>
2. 计算属性
computed：计算一些复杂的表达式
1 <body> 2 <div id="app"> 3 {{birth}} 4 </div> 5 <script> 6 new Vue({ 7 el:"#app", 8 data:{ 9 birthday:1529032123201 10 }, 11 computed:{ 12 birth(){ 13 return new Date(this.birthday).getFullYear() + "-" + new Date(this.birthday).getMonth() 14 + "-" + new Date(this.birthday).getDay(); 15 } 16 } 17 }); 18 </script> 19 </body>
3. watch监听值的变化
1 <body> 2 <div id="app"> 3 <input type="text" v-model="msg"> 4 </div> 5 <script> 6 new Vue({ 7 el:"#app", 8 data:{ 9 msg:"" 10 }, 11 watch:{ 12 //可以起监听的效果 13 msg(newVal,oldVal){ 14 console.log("老值：" + oldVal); 15 console.log("新值：" + newVal); 16 } 17 } 18 }); 19 </script> 20 </body>
4. 组件
4.1 什么是组件
组件是用来完成特定功能的一个自定义的HTML标签。
4.2 作用
组件是对特定功能代码（html、css、js）的封装，通过组件的名字可以重复利用该组件中的代码。
4.3 组件的分类
组件分为全局组件和局部组件。
全局组件：在所有vue实例中（在它所挂载元素下面有效）有效。
局部组件：在自己vue实例中（在它所挂载元素下面有效）有效。
4.3.1 全局组件
语法：
Vue.component("自定义标签的名字",{配置对象 })
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <mycomponent1></mycomponent1> 11 <mycomponent2></mycomponent2> 12 </div> 13 <hr> 14 <div id="app1"> 15 <mycomponent1></mycomponent1> 16 <mycomponent2></mycomponent2> 17 </div> 18 <script> 19 Vue.component("mycomponent1",{ 20 template:"<h1>今天天气真好！</h1>" 21 }); 22 var templateConfig = { 23 template:"<h1>适合出去运动！</h1>" 24 }; 25 Vue.component("mycomponent2",templateConfig); 26 new Vue({ 27 el:"#app", 28 data:{} 29 }); 30 new Vue({ 31 el:"#app1", 32 data:{} 33 }) 34 </script> 35 </body> 36 </html>
4.3.2 局部组件
特点：局部组件只能够在所挂载的标签中使用
1 <div id="app"> 2 <mycomponent1></mycomponent1> 3 </div> 4 <hr> 5 <div id="app1"> 6 <mycomponent1></mycomponent1> <!-- 不能使用 --> 7 </div> 8 <script> 9 new Vue({ 10 el:"#app", 11 data:{}, 12 components:{ 13 "mycomponent1":{ 14 template:"<h1>今天天气真好！</h1>" 15 } 16 } 17 }); 18 new Vue({ 19 el:"#app1", 20 data:{} 21 }) 22 </script>
4.4.4 组件使用两种html模板
1 <body> 2 <div id="app"> 3 <mycomponent1></mycomponent1> 4 </div> 5 <!--<template id="mytemplate"> 6 <h1>template标签中的html！</h1> 7 </template>--> 8 <script type="text/tempalte" id="mytemplate"> 9 <h1>script标签中的html！</h1> 10 </script> 11 <script> 12 new Vue({ 13 el:"#app", 14 data:{}, 15 components:{ 16 "mycomponent1":{ 17 //(1)直接在组件写个template这个模块 18 // template:"<h1>直接写在template模块中的哦</h1>" 19 //(2)定义template标签，再引用 20 //template:"#mytemplate" 21 //(3)定义在script标签中，再引用 22 template:"#mytemplate" 23 } 24 } 25 }); 26 </script> 27 </body>
4.4.5 组件中的数据必须是函数
1 <body> 2 <div id="app"> 3 <mycomponent1></mycomponent1> 4 </div> 5 <!-- 模板里面的内容 必须包含在一个根元素里面--> 6 <template id="mytemplate"> 7 <div> 8 <form> 9 {{name1}}<input type="text" name="username"> 10 </form> 11 </div> 12 </template> 13 <!-- 14 (1)如果要使用模板里面的数据,必须是函数的形式 15 (2)模板里面如果有多个标签,必须包含在一个根标签里面 16 --> 17 <script> 18 var templateConfig = { 19 template:"#mytemplate", 20 data(){ 21 return {name1:"用户名"}; 22 } 23 }; 24 Vue.component("mycomponent1",templateConfig); 25 new Vue({ 26 el:"#app", 27 data:{} 28 }); 29 </script> 30 </body>
注意事项：
- data数据只能够以函数的形式返回，因为函数中可以写其他的业务代码。
- 只能够在各自的组件模板中使用各自的组件中的data数据。
- Vue对象中的数据不能够在组件中使用，组件的数据也不能够在挂载的html标签上使用。
5. 路由
5.1 什么叫路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
5.2 路由的使用
(1) 先安装
npm install vue-router
(2) 引入js
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
(3) js代码
1 <script> 2 //先准备组件 3 var index = Vue.component("index",{ 4 template:"<h1>首页</h1>" 5 }); 6 var product = Vue.component("product",{ 7 template:"<h1>产品介绍</h1>" 8 }); 9 var about = Vue.component("about",{ 10 template:"<h1>关于我们</h1>" 11 }); 12 var router = new VueRouter({ 13 routes:[{ 14 path:"/",//路由地址 15 component:index//路由对应的资源 16 },{ 17 path:"/product", 18 component:product 19 },{ 20 path:"/about", 21 component:about 22 }] 23 }); 24 //把路由挂载到标签上面 25 new Vue({ 26 el:"#app", 27 data:{}, 28 router:router 29 }); 30 </script>
(4) 在html中使用
1 <div id="app"> 2 <router-link to="/">首页</router-link> 3 <router-link to="/product">产品介绍</router-link> 4 <router-link to="/about">关于我们</router-link> 5 <hr> 6 <!--渲染模板，渲染组件--> 7 <router-view></router-view> 8 </div>
6. webpack的使用
6.1 什么是webpack？
把所有的项目资源打包成一些比较小的资源。
6.2 为什么需要打包？
(1) 减少页面对于资源的请求，提高效率。
(2) 可以降低版本，ES6-->ES5 为了兼容浏览器。
(3) 将代码打包的同时进行混淆，提高代码的安全性
6.3 js导包用法
(1) 安装
npm install -g webpack
npm install -g webpack-cli
(2) 创建一些代码
a.js
var b = require("./b.js"); require("../css/index.css"); console.log(b);
b.js
define(function () { var b = "b模块"; return b; });
(3) 运行打包的命令
webpack src/a.js -o dist/bundle.js
(4) 创建一个html页面 ,引入bundle.js文件
6.4 打包配置文件方式
在项目的根路径下面创建一个文件：
webpack.config.js
1 var path = require("path"); 2 module.exports = { 3 entry: './src/a.js', 4 output: { 5 path: path.resolve(__dirname, './dist'), 6 filename: 'bundle.js' 7 } 8 }
运行：webpack
6.5 css打包用法
(1) 下载安装css加载器
css-loader style-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
(2) 配置webpack.config.js
1 const path = require('path'); 2 //配置入口和出口 3 module.exports = { 4 entry: './src/a.js',//入口文件 5 output: { //出口 6 path: path.resolve(__dirname, 'dist'), 7 filename: 'bundle.js' 8 },module: { 9 rules: [ 10 { 11 test: /.css$/, //匹配文件规则 12 use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载 13 // webpack use的配置，是从右到左进行加载的 14 } 15 ] 16 } 17 };
(3) 在js文件里面引入css
1 var a ='aaa'; 2 var b =require('./b.js'); 3 require('../css/index.css') 4 console.log(b);
(4) 在终端terminal运行webpack，生成一个bundle.js的文件
(5) 在HTML页面引入bundle.js文件
7. 前端项目放到服务器运行
(1) 安装
npm install webpack-dev-server --save-dev
npm install webpack --save-dev
(2) 在package.json中配置script
"scripts": { "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js" }
(3) package.json版本
1 "devDependencies": { 2 "css-loader": "^3.2.0", 3 "style-loader": "^1.0.1", 4 "webpack": "^3.10.0", 5 "webpack-dev-server": "^2.9.7" 6 }
(4) 在终端运行 npm run dev
(5) 访问默认端口是：localhost:8080
8. 脚手架搭建
(1) npm install -g @vue/cli
(2) vue create hello-world
(3) 选中VueProject（第二个）
(4) cd hello-world
yarn serve 运行
yarn build 编译（额外生成一些文件）
(5) npm run serve 运行