一、v-on 绑定事件
语法 :
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>
<div id="app">
{{num}}
<button v-on:click="num++">按钮1</button>
<button @click="num++">按钮2</button>
<br/>
<button v-on:click="add">按钮3</button>
<button v-on:click="say('蔡徐坤')">按钮4</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add(){
this.num++;
},
say(msg){
console.log("打印一下"+msg);
}
}
})
</script>
二、计算属性和watch
2.1、计算属性
<body>
<div id="app">
{{birth}}
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
birthday:1529032345671,
message:"生日"
},
computed:{
birth(){
return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"
+new Date(this.birthday).getDay()+"日"+new Date(this.birthday).getHours()+"时"
+new Date(this.birthday).getSeconds()+new Date(this.birthday).getTimezoneOffset()
}
}
})
</script>
2.2、watch 监听值的变化
<div id="app">
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"空的"
},
watch:{
message(mewVal,lodVal){
console.log(mewVal)
console.log(lodVal)
}
}
})
</script>
三、组件
组件是用来完成特定功能的一个自定义的HTML标签
作用:
(1)可以起到重复利用的效果
(2)在路由里面使用
3.1、全局组件
各个地方地方都可以使用
<div id="app">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<div id="app1">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<script>
Vue.component("mycomponent1",{
template:"<h1>这是我自定义的第一个component</h1>"
});
var templateConfig = {
template:"<h1>这是我自定义的第二个component</h1>"
}
Vue.component("mycomponent2",templateConfig)
var app = new Vue({
el:"#app",
data:{
}
})
var app1 = new Vue({
el:"#app1",
data:{
}
})
</script>
3.2、局部组件
只能自己能用 只能使用在当前挂载标签上面
<div id="app">
<mycomponent1></mycomponent1>
</div>
<div id="app1">
<mycomponent1></mycomponent1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{},
components:{
"mycomponent1":{
template:"<h1>这是我自定义的第一个component</h1>"
}
}
});
var app1 = new Vue({
el:"app1",
data:{}
})
</script>
3.3、组件里面模板写法
<div id="app">
<mycomponet1></mycomponet1>
</div>
<!--在组件里面引用 template
<template id="mytemplate">
<h1>这是我自定义的一个component</h1>
</template>-->
<script type="text/template" id="mytemplate">
<h1>template标签中的html</h1>
</script>
<script>
var app = new Vue({
el:"#app",
data:{},
components:{
"mycomponet1":{
template:"#mytemplate"
}
}
})
</script>
模板里面的数据使用函数
<div id="app">
<mycomponet1></mycomponet1>
</div>
<template id="mytemplate">
<div>
<a>xxxxxx</a>
<form>
{{name1}}:<input type="text" name="username"/>
</form>
</div>
</template>
<!--
(1)如果要使用模板里面的数据,必须是函数的形式
(2)模板里面如果有多个标签,必须包含在一个根标签里面
-->
<script>
var mytemplateConfig={
template:"#mytemplate",
data(){
return {name1:"张三"}
}
}
Vue.component("mycomponet1",mytemplateConfig)
var app = new Vue({
el:"#app",
data:{
massage:"xxxxxx"
}
})
</script>
四、路由
通过一个地址url, 去定位到一个组件 … 类似于导航作用
4.1、路由的使用
(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)js代码
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">详情</router-link>
<router-link to="/product">产品</router-link>
<hr/>
<router-view></router-view>
</div>
<script>
var index = Vue.component("index",{
template:'<h1>首页</h1>'
});
var about = Vue.component("about",{
template:'<h1>详情</h1>'
});
var product = Vue.component("product",{
template:'<h1>产品</h1>'
});
var router = new VueRouter({
routes:[{
path:"/",
component:index
},{
path:"/about",
component:about
},{
path:"/product",
component:product
}]
});
var app = new Vue({
el:"#app",
data:{
message:'xxx'
},
router:router
});
</script>
五、webpack打包
把所有的项目资源 打包成一些比较小的资源
作用:
(1) 减少页面对于资源的请求,提高效率
(2)可以降低版本,Es6–>Es5为了兼容浏览器
(3)将代码打包的同时进行混淆,提高代码的安全性。
5.1、JS打包用法
(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文件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="dist/bundle.js"></script>
<!-- <link rel="stylesheet" href="css/index.css"/>-->
</head>
<body>
<span>我是蔡徐坤</span>
</body>
5.2、打包配置文件方式
webpack.config.js
var path = require("path");
module.exports = {
entry: './src/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
运行:
webpack
5.3、css打包用法
(1)下载安装 css加载器
css-loader style-loader
(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']
}
]
}
};
(3) 在js文件里面引入css
var a ='aa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);
(4)在终端 terminal运行 webpack
生成一个bundle.js文件
(5)在页面引入该文件bundle.js
六、Vue-cli 脚手架搭建
(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 --运行