文章目录
1 绑定事件指令 v-on
语法:
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>
<div id="app">
{{num}}
<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('today is cold')">说话</button>
</div>
<script>
var app = new Vue({
el:"#app",
data : {
num:0
},
methods : {
countSum(){
this.num++;
},
say(msg){
alert(msg);
}
}
})
</script>
2 关于计算的属性
computed:
作用:可以代替的复杂的表达式
<div id="app">
{{birth}}
{{getBirth1()}}
</div>
<script>
var app = new Vue({
el:"#app",
data : {
Birthdate : new Date().getTime()
},
methods : {
getBirth1(){
return new Date(this.Birthdate).getFullYear() +"年"
+new Date(this.Birthdate).getMonth()+"月"
+new Date(this.Birthdate).getDay()+"号";
}
},
computed:{
birth(){
return new Date(this.Birthdate).getFullYear()+"年"
+new Date(this.Birthdate).getMonth()+"月"
+new Date(this.Birthdate).getDay()+"号";
}
}
})
</script>
结果：
3 watch
<body>
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
},
watch:{
msg(newVal,oldVal){
//可以获取上次改变的值-- 记录日志 --用处不是很大
console.log(newVal,oldVal);
}
}
})
</script>
</body>
结果：
4 Vue 组件
-
什么是组件：
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js特性进行了扩展的原生 HTML 元素。
-
以前组件:
Component --easyui 组件 datagrid tabs menu…panel,dialog
Vue组件: 自定义的代码块或者自定义标签
<atag></atag> -
综上所述：组件是用来完成特定功能的一个自定义的HTML标签
-
组件有什么用:
- 可以反复使用
- 完成一些功能
-
vue里面组件分类
- 全局标签 ：任意地方都能使用 任意挂载的标签都能使用
- 局部标签：只能在当前挂载的标签中使用
全局组件
<div id="app">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<script>
Vue.component("mycomponet1",{
template:"<h1>这是一个一级标题！！！</h1>"
});
mycomponet2={
template: "<h2>这是一个二级标题！！！</h2>"
}
Vue.component("mycomponet2",mycomponet2)
var app = new Vue({
el:"#app",
})
var app1 = new Vue({
el:"#app1",
})
</script>
注意事项:
template中的html必须在一个标签中. 仅且只能有一个根节点
局部组件
<div id="app">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<script>
var app = new Vue({
el:"#app",
components:{
"mycomponet1":{
template :"<h1>这是一个局部的组件标题1</h1>"
},
"mycomponet2":{
template :"<h1>这是一个局部的组件标题2</h1>"
}
}
})
var app1 = new Vue({
el:"#app1",
})
</script>
组件的两种模板写法
div id="app">
<mycomponet1></mycomponet1>
</div>
<!--<template id="mytemplate">
<h1>这是引用的第一种方式</h1>
</template>-->
<script type="text/template" id="mytemplate">
<h1>这是引用的第二种方式</h1>
</script>
<script>
/*方式一 这是components的第一种写法*/
/*var app = new Vue({
el:"#app",
components:{
"mycomponet1":{
template :"<h1>这是template的第一种写法</h1>"
}
}
})*/
/*方式二 这是components的第二种写法 通过引用的方式 */
var app = new Vue({
el:"#app",
components:{
"mycomponet1":{
template :"#mytemplate"
}
}
})
</script>
模板里面的数据必须函数
<div id="app">
<mycomponet1></mycomponet1>
{{name}}
</div>
<template id="mytemplate">
<form>
{{name}}<input type="text" />
</form>
</template>
<script>
new Vue({
el:"#app",
data : {
"name":"一一"
},
components:{
"mycomponet1":{
template :"#mytemplate",
data:function () {
return {
"name":"这是一一"
}
}
}
}
});
</script>
注意事项：
- data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
- 只能够在各自的组件模板中使用各自的组件中的data数据
- Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.
5 路由
什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
路由入门
引入路由需要的js文件
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/aer">阿二</router-link>
<router-link to="/yiyi">一一</router-link>
<router-link to="/saner">三二</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<script>
//定义组件
var indexD = Vue.component("index",{
template:"<h1>这是首页</h1>"
});
var aerD = Vue.component("aer",{
template:"<h1>这是阿二</h1>"
});
var yiyiD= Vue.component("yiyi",{
template:"<h1>这是一一</h1>"
});
var sanerD = Vue.component("saner",{
template:"<h1>这是三二</h1>"
});
// 创建一个路由
var routers = new VueRouter({
routes : [{
path :"/",
component :indexD
},{
path :"/aer",
component :aerD
},{
path :"/yiyi",
component :yiyiD
},{
path :"/saner",
component :sanerD
},]
})
new Vue({
el:"#app",
data : {
"name":"一一"
},
router:routers
});
</script>
6 webpack 打包
把项目里面内容(js,css,img等)这些资料进行打包
为什么需要打包
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
webpack是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。
使用/安装
本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：–推荐使用 后面要用
npm install -g webpack
npm install -g webpack-cli
打包js文件
-
创建前端项目
npm init -y
-
创建两个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
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 部署
把前端内容放入服务里面运行
-
npm install webpack-dev-server --save-dev
-
package.json配置
{ "name": "VueDay02-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.4.0", "style-loader": "^1.1.2", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" } } -
运行 npm run dev命令 启动服务
-
ctrl+c —>y 停止服务
7 Vue的脚手架
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli
使用脚手架
-
安装脚手架
npm install -g vue-cli (-g就是全局安装)
-
创建一个项目
执行 vue init webpack
成功！！！
-
运行命令:
npm run dev
-
目录结构说明
-
main.js
入口 启动的时候就找这个文件
-
components/HelloWorld.vue
相当于界面 以后我们需要在里面写的页面
-
app.vue
进去后的主界面
- router/index.js
说明：
**程序运行时 会先找到main.js 然后在新建的Vue中找到路由router 找到对应的路由(index.js) 然后通过 路径找到对应的默认界面 将HellWorld(主界面 通过一个组件的方式)界面渲染到index.js 然后将routes导出， 在App.vue中导入到路由的出口 最后将这个模板导出(通过一个组件的方式) 渲染到 (main.js) **
-
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
