全局组件
- 组件
1.组件可以扩展html元素
2.封装可重用的代码
3.自定义标签 - 组件的分类
组件分为全局组件和局部组件
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效 - 全局组件语法
Vue.component(“组件名”,{
配置对象
}) - 特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性 - 注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<div style="color: red"><diycomponent></diycomponent></div>
<div style="color: red"><diycomponent></diycomponent></div>
<div style="color: red"><diycomponent></diycomponent></div>
</div>
</body>
</html>
<!--
组件可以扩展html元素 封装可重用的代码 自定义标签
-->
<script type="text/javascript">
//diycomponent 组件名小写 如果使用驼峰命名diyComponent 标签中就要diy-Component
Vue.component("diycomponent",{//template中的html必须在一个标签中. 仅且只能有一个根节点
template:"<span><h1>全局组件.....</h1><h2>55555</h2></span>"
})
new Vue({
el:"#god",
})
</script>
局部组件
- 语法：
new Vue({
el: “#id名”,
data: {},
components : {
“局部组件的名字1” : {组件的配置对象},
“局部组件的名字2” : {组件的配置对象}
}
});
特点：
局部组件只能够在所挂载的标签中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入vue.js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<diy></diy>
<diycomponent></diycomponent>
</div>
<div id="god1">
<diy></diy>
<diycomponent></diycomponent><!--局部组件 挂载的这个dom不会生效-->
<innercomponent></innercomponent><!--因为是挂载god下面的 所以在god1中不会生效-->
</div>
</body>
</html>
<!--
组件可以扩展html元素 封装可重用的代码 自定义标签
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效
-->
<script type="text/javascript">
//定义一个全局组件
let diy1=Vue.component("diycomponent",{
template:"<span><h1>全局组件.....</h1><h2>55555</h2></span>"
})
//定义一个局部组件
new Vue({
el:"#god",
components:{
diy:{
template:"<h1 style='color: chartreuse'>局部组件</h1>"
},
innercomponent:diy1,//在局部组件调用已经创建好的组件
}
})
new Vue({
el:"#god1"
})
</script>
定义组件的其他方式
- 方式一
在template标签中定义模板，然后通过id引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<diy></diy><br/>
<diycomponent></diycomponent>
<!--把template直接挂载到dom中会显示-->
<template>
<h1>会显示</h1>
</template>
</div>
<!--定义组件的模板-->
<template id="mytemplate">
<form action="" method="">
用户名：<input type="text" name="username">
用户名：<input type="text" name="username">
用户名：<input type="text" name="username">
</form>
</template>
</body>
</html>
<script type="text/javascript">
//定义一个全局组件
Vue.component("diycomponent",{
template:"#mytemplate"//将原来写在这里的代码统一写在了template标签中，通过id来引用
})
//定义一个局部组件
new Vue({
el:"#god",
components:{
diy:{
template:"#mytemplate"
},
}
})
</script>
- 方式二
在script标签中定义模板；
script直接挂载到dom中不会显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<diy></diy><br/>
<diycomponent></diycomponent>
</div>
<!--定义组件的模板-->
<!--script直接挂载到dom中不会显示-->
<script id="mytemplate" type="text/template">
<form action="" method="">
用户名：<input type="text" name="username">
用户名：<input type="text" name="username">
用户名：<input type="text" name="username">
</form>
</script>
</body>
</html>
<script type="text/javascript">
//定义一个全局组件
Vue.component("diycomponent",{
template:"#mytemplate"
})
//定义一个局部组件
new Vue({
el:"#god",
components:{
diy:{
template:"#mytemplate"
},
}
})
</script>
获取动态元素
- 语法:
Vue.component(“组件的名字”:{
template: “”,
data : function(){
return {
键1:值1,
键2:值2
}
}
}) - 注意：
1.如果组件要获取动态元素，它不是找的vue中的data属性，而是找component中的data属性
2.模板中data对应的值，必须是一个函数 并且在函数内部返回的值必须是json对象
3.只能够在各自的组件模板中使用各自的组件中的data数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<diycomponent></diycomponent>
</div>
<!--
注意：
1.如果组件要获取动态元素，它不是找的vue中的data属性，而是找component中的data属性
2.模板中data对应的值，必须是一个函数 并且在函数内部返回的值必须是json对象
3.只能够在各自的组件模板中使用各自的组件中的data数据
-->
<template id="mytemplate"><!--注意template里面的值必须有一个根标签包裹-->
<h1>{{name}}---{{age}}</h1>
</template>
</body>
</html>
<script type="text/javascript">
//定义一个全局组件
Vue.component("diycomponent",{
template:"#mytemplate",
data:function () {
return{
name:"洪七公",
age:25
}
}
});
new Vue({
el:"#god",
data:{
name:"周董鱼"//不会取vue中的data属性
}
})
</script>
路由
- 路由
1.路由是负责将进入的浏览器请求映射到特定的组件代码中；
简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。
2.路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js - 下载路由npm install vue-router
- 引入vue-router.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入vue.js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--引入路由.js-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
<body>
<div id="god">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 使用god中的路由：匹配到index路由地址，然后在router-view标签中展示这个地址对应的资源 -->
<router-link to="/index">首页</router-link>
<router-link to="/product">产品</router-link>
<!--路由匹配到组件进行渲染-->
<router-view></router-view>
</div>
</body>
</html>
<script type="text/javascript">
//定义一个全局组件
let INDEX=Vue.component("index",{
template:"<h1>首页</h1>",
});
let PRODUCT=Vue.component("product",{
template:"<h1>产品</h1>",
});
//创建一个路由
var router=new VueRouter({
routes:[
{path:"/index",component:INDEX},
{path:"/product",component:PRODUCT}
]
})
//定义一个局部组件
new Vue({
el:"#god",
//使用路由对象
router:router
})
</script>
vue生命周期
- 重要的方法
- create(){}
表示方法和数据都已经初始化完成了，create可以调用data和methods中的内容 - mounted(){}
mounted表示vue初始化完成挂载完毕，可以加载列表渲染数据，可以发送ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入vue.js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#god",
data:{
name:"洪七公"
},
methods:{
change(){
alert("渣渣辉")
}
},
//表示方法和数据都已经初始化完成了，create可以调用data和methods中的内容
created(){
alert(this.name);
this.name="洪鸡公";//修改内容
this.change()
},
//mounted表示vue初始化完成挂载完毕，可以加载列表渲染数据，可以发送ajax请求
mounted(){
alert(this.name)//这里显示被修改后的内容
}
})
</script>
计算属性
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
- computer(){}
把冗杂的代码写在一个方法里面，直接调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入vue.js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--引入路由.js-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
<body>
<div id="god">
<!--计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。-->
{{birth}}
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#god",
data:{
birthday:1429032123201// 毫秒值
},
computed:{
birth(){
//computed 计算属性 把冗杂的代码写在一个方法里面，直接调用方法
const date = new Date(this.birthday);
return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay()+"日";
}
}
})
</script>
Watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入vue.js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
<div id="god">
<!-- watch可以让我们监控一个值的变化。从而做出相应的反应。-->
<input type="text" v-model="value">
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#god",
data:{
value:""
},
watch:{
value(newVal,oldVal){
console.debug("新值"+newVal)
console.debug("旧值"+oldVal)
}
}
})
</script>
webpack打包
-
webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。 -
作用
1.将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
2.将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
3.将代码打包的同时进行混淆，提高代码的安全性。 -
安装
本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：–推荐使用 后面要用
npm install -g webpack
npm install -g webpack-cli -
配置webpack.config.js
//引入的路径模块
var path = require("path");
module.exports = {
//打包的入口
entry: './js/a.js',
//出口
output: {
//当前项目下的dist目录
path: path.resolve(__dirname, './dist'),
//最终打包的文件名
filename: 'bundle.js'
}
}
导出
/*
导出一个
export const util={
sum(){
return 1;
}
}*/
//导出多个
const util={
sum1(){
return 3;
}
}
const util2={
sum2(){
return 3;
}
}
export {util,util2}
导入
/*
引入一个
import {util} from "./b"
let num = util.sum();
alert(num+1)
*/
import {util,util2} from "./b"
let num = util.sum1();
let num1= util2.sum2();
alert(num+num1)
在控制台输入命令webpack 生成bundle.js
最后在html页面引用打包好的bundle.js
- commonjs语法规则
导出
//commonjs语法规范导出
define(function () {
return "d.js模块";
})
导入
//commonjs语法 导入
let d = require("./d")
alert(d);
require("../css/index.css")
导入css样式需要安装加载器
style loder 将模块的导出作为样式加载到dom中
css loder 解析css文件之后，用import加载，并且返回css代码
webpack.config,js中配置
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
- 热更新web服务器
刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务；
1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js", },
–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1
npm run dev/test
出现错误之后
https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html
“devDependencies”: {
“css-loader”: “^3.1.0”,
“style-loader”: “^0.23.1”,
“webpack”: “^3.10.0”,
“webpack-dev-server”: “^2.9.7”
},
在执行 npm install
Vue-cli—脚手架
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli
- vue-cli快速创建webpack项目
vue init webpack -->3个yes3个no - 运行
npm run dev
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
