1、绑定事件指令 v-on
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
点击右侧按钮可以增加数字---{{num}}---
<button v-on:click="num++">点击+1</button>
<button @click="num++">点击+1</button>
<button @click="countSum()">点击+2</button>
<button @click="countSum">点击+2</button>
<button @click="say('这是一个弹出窗口')">点击弹出窗口</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
countSum(){
this.num = this.num + 2
},
say(msg){
alert(msg);
}
}
})
</script>
</html>
2、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{birthday}}}<br>
{{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}<br>
{{getBirth()}}<br>
{{birth}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:0,
birthday:new Date()
},
methods:{//方法
getBirth(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
},
computed:{
//计算属性
birth(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
}
})
</script>
</html>
3、watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>watch属性</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:''
},
methods:{
},
watch:{
msg(newVal,oldVal){
console.log(newVal,oldVal);
}
}
})
</script>
</html>
4、全局属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局属性</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
</body>
<script>
Vue.component("mycomponet1",{
template:"<h1>这是第一个全局组件</h1>"
});
var MyComponent2 = {
template: "<h2>这是第二个全局组件</h2>"
}
Vue.component("mycomponet2",MyComponent2);
new Vue({
el:"#app1",
});
new Vue({
el:"#app2"
})
</script>
</html>
5、局部属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局属性</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<!-- <mycomponet2></mycomponet2> 因为是局部组件,所以这里放开会报错-->
</div>
</body>
<script>
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h1>这是第一个局部组件</h1>"
},
"mycomponet2":{
template:"<h2>这是第二个局部组件</h2>"
}
}
});
new Vue({
el:"#app2"
})
</script>
</html>
6、template模版组件
写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template写法</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<mycomponet1></mycomponet1><!--写法一-->
</div>
<div id="app2">
<template id="mytemplate">
<h3>这是template的写法2</h3><!--写法二(形式一)-->
</template>
</div>
<!--<script type="text/template" id="mytemplate2">
<h2>这是template的写法2(形式二)</h2>
</script>-->
</body>
<script>
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h1>这是template写法一</h1>"
}
}
});
//写法二
new Vue({
el:"#app2",
components:{
"mycomponet2":{
template:"#mytemplate2"
}
}
})
</script>
</html>
模板里面的数据必须是函数
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>template组件的数据是函数</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<mycomponet1></mycomponet1>
{{name}}
</div>
<template id="mycomponet">
<form>
{{name}}<input type="text" v-model="msg" v-on:change="changeData" />
<br>
{{msg}}
</form>
</template>
</body>
<script>
new Vue({
el:"#app1",
data:{
"name":"张无忌"
},
components:{
"mycomponet1":{
template:"#mycomponet",
data:function () {
return{
name: "组件名字",
msg:"这个是template的值",
}
},
methods:{
changeData(){
console.log(this.msg)
}
}
}
}
});
</script>
</html>
7、路由
(1)安装路由
安装路由 npm install vue-router
卸载路由 npm uninstall vue-router
(2)引用vue-router.js文件
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
(3)直接在页面使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app1">
<!--类似于a标签-->
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/logout">注销</router-link>
<!-- 路由出口-->
<router-view></router-view>
</div>
<template id="index">
<h1>这是主页主页主页</h1>
</template>
</body>
<script>
//定义组件
var index =Vue.component("index",{
template:"#index"
})
var login =Vue.component("login",{
template:"<h1>这是登录登录页面</h1>"
})
var logout =Vue.component("logout",{
template:"<h1>这是注销注销页面</h1>"
})
//创建一个路由
var routes =new VueRouter({
routes:[{
path:"/",
component:index
},{
path:"/login",
component:login
},{
path:"/logout",
component:logout
}
]
})
//把路由加到属性中
new Vue({
el:"#app1",
data:{
"name":"测试"
},
router:routes,
});
</script>
</html>
8、webpack 打包
打包目的
(1)减少单页面内的衍生请求次数,提高网站效率
(2) 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。更方便导入导出
(3)可以进行代码混淆 提高安全性
打包工具
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析,然后将这些模块按照指定的规则生成对应的静态资源。
使用webpack
打包js文件
(1)下载安装
npm install -g webpack
npm install -g webpack-cli
(2)创建两个js文件
a.js
var a = "a模块";
var b = require('./b.js');
console.log(a);
console.log(b);
alert(b);
alert("打包成功啦");
b.js
define(function () {
var b = "b模块";
return b;
});
执行命令:
webpack src/a.js -o dist/bundle.js
打包css文件
步骤一:
npm install style-loader --save-dev
npm install css-loader --save-dev
步骤二:
a. js引入:
*var* a = “a模块”;
*var* b = require(’./b.js’);
console.log(b);
require(’…/css/index.css’)
步骤三:在webpack.config.js文件引入下面代码
*var* path = require(“path”);
module.exports = {
entry: ‘./web/js/a.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
filename: ‘bundle.js’
},
module: {
rules: [
{
test: /.css$/, //匹配文件规则
use: [‘style-loader’, ‘css-loader’] //匹配后使用什么加载器进行模块加载
// webpack use的配置,是从右到左进行加载的
},
]
}
}
步骤四:打包:webpack
9、vue部署到服务器
(1)安装
npm install webpack-dev-server --save-dev
(2)package.json配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
}
版本兼容性:
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
(3)运行 npm run dev命令 启动服务
ctrl+c —>y 停止服务
10、Vue的脚手架
就是一个模板,已经有了内容,修修改改就好了
(1) 安装脚手架
npm install -g vue-cli
(2)创建一个项目
(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
… no
(4)运行命令
npm run dev