# 1.绑定事件指令 v-on(掌握)
<button v-on:click="num++">点击1</button>
<button @click="num++">点击2</button>
<button @click="countSum()">点击3</button>
<button @click="countSum">点击4</button>
<button @click="say('今天天气好冷了')">点击5</button>
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
countSum(){
this.num = this.num + 1
},
say(msg){
console.log(msg);
}
}
})
</script>
2 计算属性(掌握)
作用:可以代替的复杂的表达式
比如下面:
<div id="app">
{{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}
{{birth1}}
{{getBirth1()}}
</div>
<script>
new Vue({
el:"#app",
data:{
num:0,
birthday:1529032123201
},
methods:{
getBirth1(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
},
computed:{
//计算属性
birth1(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
}
})
</script>
3 watch(掌握)
<body>
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
},
methods:{
},
watch:{
msg(newVal,oldVal){
//可以获取上次改变的值-- 记录日志 --用处不是很大
console.log(newVal,oldVal);
}
}
})
</script>
</body>
4 Vue 组件(掌握)
(1)以前组件: Component --easyui 组件 datagrid tabs menu…panel,dialog
Vue组件: 自定义的代码块或者自定义标签
(2)组件有什么用:
(1)可以反复使用
(2)完成一些功能
(3)vue里面组件分类
全局组件:任意地方都可以使用,任意挂载的标签都使用
局部组件:只能在当前的挂载的标签里面的使用
vue组件是vue里面比较重要知识点
4.1 全局组件
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<script>
//全局组件
Vue.component("mycomponet1",{
template:"<h1>这个字好大1111111</h1>"
});
var mycomponet2={
template:"<h1>这个字好大222222</h1>"
}
Vue.component("mycomponet2",mycomponet2);
new Vue({
el:"#app1"
});
new Vue({
el:"#app2"
});
</script>
</body>
4.2 局部组件
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<mycomponet1></mycomponet1>
</div>
<script>
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h2>这是一个局部的组件111</h2>"
},
"mycomponet2":{
template:"<h2>这是一个局部的组件222</h2>"
}
}
});
new Vue({
el:"#app2"
});
</script>
</body>
4.3组件里面模板写法
<body>
<div id="app1">
<mycomponet1></mycomponet1>
</div>
<!--<template id="mytemplate">
<h3>这是一个template写法1</h3>
</template>-->
<script type="text/template" id="mytemplate">
<h1>template标签中的htmlssssssssssssssss</h1>
</script>
<script>
// 写法一:直接template写字符串
/* new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h2>这是一个局部的组件111</h2>"
}
}
});*/
//写法二:
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"#mytemplate"
}
}
});
</script>
4.4 模板里面的数据必须函数
<div id="app1">
<mycomponet1></mycomponet1>
{{name}}
</div>
<template id="mytemplate">
<form>
{{name}}<input type="text" />
</form>
</template>
<script>
new Vue({
el:"#app1",
data:{
"name":"用户名1111"
},
components:{
"mycomponet1":{
template:"#mytemplate",
data:function(){
return {
"name":"用户名"
}
}
}
}
});
</script>
</body>
</html>
5 路由(掌握)
路由: 找路
路由器: 很多接口,通过接口 找到一台电脑
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yq7aVeo6-1577695415830)(笔记.assets/image-20191229103047367.png)]
5.1路由使用
(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)使用
<body>
<div id="app1">
<!--相当于a标签 long 龙哥的组件-->
<router-link to="/">首页</router-link>
<router-link to="/long">龙哥</router-link>
<router-link to="/cheng">成哥</router-link>
<router-link to="/jinbo">金箔哥</router-link>
<!-- 路由出口-->
<router-view></router-view>
</div>
<script>
//定义组件
var index = Vue.component("index",{
template:"<h1>首页</h1>"
});
var longCp = Vue.component("long",{
template:"<h1>大家好,我是渣渣龙</h1>"
});
var chengCp = Vue.component("cheng",{
template:"<h1>大家好,晨晨渣</h1>"
});
var jinbo = Vue.component("jinbo",{
template:"<h1>大家好,金箔哥</h1>"
})
//创建一个路由
var routes1 = new VueRouter({
routes:[{
path:"/",
component:index
},{
path:"/long",
component:longCp
},{
path:"/cheng",
component:chengCp
},{
path:"/jinbo",
component:jinbo
}]
});
//把路由挂载到vue对象上面去
new Vue({
el:"#app1",
data:{
"name":"用户名1111"
},
router:routes1
});
</script>
</body>
6 webpack 打包(了解)
把项目里面内容(js,css,img等)这些资料进行打包
6.1 为什么需要打包 -->项目开发完之后
(1)减少单页面内的衍生请求次数,提高网站效率
(2) 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
导入 导出
(3)可以进行代码混淆 提高安全性
6.2 webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析,然后将这些模块按照指定的规则生成对应的静态资源。
6.3 使用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);
b.js
define(function () {
var b = "b模块";
return b;
});
执行命令:
webpack src/a.js -o dist/bundle.js
6.4 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
6.5 部署(了解)
把前端内容放入服务里面运行
(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 停止服务
7 Vue的脚手架(掌握)
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
7.1 使用脚手架
(1) 安装脚手架
npm install -g vue-cli
(2)创建一个项目
(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
… no
(4)运行命令
npm run dev
7.2 修改一个页面
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 停止服务
# 7 Vue的脚手架(掌握)
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
## 7.1 使用脚手架
(1) 安装脚手架
npm install -g vue-cli
(2)创建一个项目
(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
... no
(4)运行命令
npm run dev
## 7.2 修改一个页面