vue进阶

1.vue事件

1.1 v-on

使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>
注意事项:
事件处理函数作为事件句柄的值不需要调用.

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		num:0
	},
	methods:{
		myclick:function(){
			app.num++;
			console.log(this);
		}
	}
});

1.2 内联事件处理函数

使用v-on指令注册事件
<标签 v-on:事件句柄=“内联函数(实际参数)”></标签>
简写方式
<标签 @事件句柄=“内联函数(实际参数)”></标签>
注意事项:
内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数

<div id="app">
 <button v-on:click="say('hello')">hello</button><br/>
 <button @click="say('hi')">hi</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
	},
	methods:{
		say:function(message){
			//this指向当前vue对象：app
			console.log(this);
		}
	}
});

2.计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
computed:计算一些复杂的表达式

computed:{
            birth(){
                return new Date(this.birthday).getFullYear()+"年" +
                    new Date(this.birthday).getMonth()+"月"
            }
        }

3.watch 监听值的变化

watch可以让我们监控一个值的变化。从而做出相应的反应。

 watch:{
            message(newVal,oldVal){
                console.log("老值:"+oldVal);
                console.log("新值:"+newVal);
            }
        }

4.组件

4.1 组件是什么

组件: Component
组件是用来完成特定功能的一个自定义的HTML标签
作用:
​ (1)可以起到重复利用的效果
​ (2)在路由里面使用

4.2 组件的使用

组件分类:
​ 全局组件 : 各个地方地方都可以使用
​ 局部组件 : 只能自己能用 只能使用在当前挂载标签上面

4.2.1 全局组件

Vue.component(“自定义标签的名字”,{配置对象})
特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景：
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

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

<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
	template : "<h1>这是第一个全局组件</h1>"
})

//定义第二个全局组件
var component2Config = {
	template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);

var app = new Vue({
	el: "#app",
	data: {
	}
});

var app1 = new Vue({
	el: "#app1",
	data: {
	}
});

4.2.1 全局组件

var app = new Vue({
el: “#app”,
data: {},
components : {
“局部组件的名字1” : {组件的配置对象}
“局部组件的名字2” : {组件的配置对象}
}
});
特点：
局部组件只能够在所挂载的标签中使用

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>


//>>1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
	el: "#app1",
	data: {},
	components : {
		"mycomponent" : {
			template : "<h1>这是一个局部组件</h1>"
		}
	}
});

//>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({	
	el: "#app2",
	data: {}
});

4.3 组件使用两种HTML模板

组织两种方式
1 直接在template属性写上html代码字符串或者变量指定
template: “html代码的字符串”

2 将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串)
a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码

 <template id="mytemplate">
            <h1>template标签中的html</h1>
        </template>

       <script type="text/template" id="mytemplate">
            <h1>template标签中的html</h1>
        </script>

b. template属性上使用上门的html模板代码.

 "mycomponent2":{
              template: "#mytemplate" ,  #代表找到对应的html代码作为当前组件的模板代码

4.4 组件中的数据必须是函数

"组件的名字":{
	template: "",
	data : function(){
		return {
		  键1:值1,
		  键2:值2
		}
	}
}

注意事项:
data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

 components:{
               "mycomponent1":{
                   // "template":"#templateStr1"
                   "template":"#templateStr2",
                   //模板是定义数据以下是可行的
                   //1 必须是函数
                   //2 通过return返回数据对象
                   //3 如果有多个数据就是对象对象多个属性及值
                   data(){
                       return {
                           messaage:"jjjj",
                           yhptest:"xxxxxxxxxxxxxx"
                       }
                   }

5.路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。

5.2 安装

(1)先安装

​npm install vue-router

(2)引入文件

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

(3)相关代码

<div id="app">
	<!-- 使用 router-link 组件来导航. -->
	<!-- 通过传入 `to` 属性指定链接. -->
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
	<router-link to="/product">公司产品</router-link>
	<router-link to="/about">关于我们</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件将渲染在这里 -->
	<router-view></router-view>
</div>

//>>1.定义首页:组件
var index = Vue.component("index", {
    template : "<h1>首页</h1>"
});
//>>2.公司产品：组件
var product = Vue.component("product", {
    template : "<h1>公司产品</h1>"
});
//>>3.关于我们：组件
var about = Vue.component("about", {
    template : "<h1>关于我们</h1>"
});

//>>4.创建一个路由：
var router = new VueRouter({
    routes : [ {
        path : "/",//路由地址
        component : index
        //路由对应的资源
    }, {
        path : "/about",//路由地址
        component : about
        //路由对应的资源
    }, {
        path : "/product",
        component : product
    }, ]
});

//创建一个vue对象
var app = new Vue({
    el : "#app",//挂载在app上
    router : router
//使用路由对象
});	

6.webpack打包

6.1 webpack是什么

把所有的项目资源 打包成一些比较小的资源

6.2 为什么需要打包

作用:

(1) 减少页面对于资源的请求,提高效率

(2)可以降低版本,Es6–>Es5为了兼容浏览器

(3)将代码打包的同时进行混淆，提高代码的安全性。

6.3 用法

(1)安装

npm install -g webpack

npm install -g webpack-cli

(2)相关代码

a.js

var a = "a模块";
var b = require('./b.js');
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

var path = require("path");
	module.exports = {
	entry: './src/a.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
}

运行

webpack

6.4 打包配置文件方式

在项目的根路径下面创建一个文件:

webpack.config.js

var path = require("path");
	module.exports = {
	entry: './src/a.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
}

//运行

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

const path = require('path');
//配置入口 和出口
module.exports = {
    entry: './src/a.js',//入口文件
    output: { //出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            }
        ]
    }
};

(3) 在js文件里面引入css

var a ='aaa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);

(4)在终端 terminal运行 webpack

生成一个bundle.js这个文件

(5)在页面引入该文件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版本

 "devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

(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 --运行