vue-day2加强
1.全局组件
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
<!--
组件的认识：组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
一句话总结组件： 组件就是自定义标签，它内部存储了很多html代码
a.html b.html c.html
1000 2000 3000
这三个界面其中有公共的html代码是500行，组件就是把这500行代码抽成一个标签，然后让其它页面
去使用该标签就可以了
组件的分类：
1.全局组件（在所有vue实例中(在它所挂载元素下面有效)有效）
创建全局组件的语法格式：
Vue.component("组件名",{
template:"html元素"
})
2.局部组件（在自己vue实例中(在它所挂载元素下面有效)有效）
-->
<script type="text/javascript">
/*注册全局代码*/
Vue.component("mycomponent",{
template:"<h1>我是全局主键</h1>"
}),
new Vue({
el:"#app"
})
</script>
2.局部组件
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--局部组件，只会在相对应的局部被使用-->
<div id="app">
<mycomponents></mycomponents>
<outcomponent></outcomponent>
</div>
<div id="app1">
<mycomponents></mycomponents>
</div>
</body>
<script type="text/javascript">
/*这个必须要用参数来接收*/
let outcomponent = Vue.component("outcomponent",{
template:"<h1>我是外部组件<h1>"
})
new Vue({
el:"#app",
components:{
mycomponents:{
template:
"<d1>我是局部组件</di>"
},
/*引用已经创建好的组件*/
incomponents : outcomponent
}
})
/*局部的就不能作用在这个里面*/
new Vue({
el:"#app1",
})
</script>
3.组件应该注意的事项
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<!--组件的使用注意事项:1.如果使用的是名字使用的是驼峰命名，那么在引入的时候要用横杠隔开<my-component></my-component>
最好的方式就是命名都是使用小写，不要使用驼峰命名
2.组件使用的时候只有一个根，否则的话后面的根是不会显示的，多根存在只会显示一个根
-->
<script type="text/javascript">
Vue.component("myComponent",{
/*template:"<h1>组件应该注意事项</h1><h2>这个是不会显示的</h2>",*/
template:"<div><h1>这个能显示</h1><h2>这个也能显示</h2></div>"
})
new Vue({
el:"#app"
})
</script>
4.定义组件的方式二
<title>Title</title>
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
<!--或者直接把template写在dom这里也可以显示-->
<template>测试一下</template>
</div>
<div id="app1">
<incomponents></incomponents>
</div>
<!--以后多采用方式2定义组件-->
<template id="mytemplate">
<form action="" method="">
用户名<input type="text" name="name"></br>
用户名<input type="text" name="name"></br>
用户名<input type="text" name="name"></br>
用户名<input type="text" name="name"></br>
<input type="submit" value="提交"></br>
</form>
</template>
</body>
<script type="text/javascript">
Vue.component("mycomponent",{
template:"#mytemplate"
}),
new Vue({
el:"#app",
})
/*采用方式二可以直接在内部进行引用组件，通过id去引用*/
new Vue({
el:"#app1",
components:{
incomponents:{
template:"#mytemplate"
}
}
})
</script>
5.定义组件的方式三(几乎不用)
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent><br/>
<incomponents></incomponents><br/>
<script type="text/template">显示啊<input type="text" name="name"><br/></script>
</div>
<!--方式三和方式二比较像只是把标签变为script，但是需要在类型那里申明-->
<!--方式三和方式二的区别在于，如果你使用了script，它就不会在在dom中进行显示-->
<script id="mytemplate" type="text/template">
<form action="" method="">
用户名<input type="text" name="name"><br/>
用户名<input type="text" name="name"><br/>
用户名<input type="text" name="name"><br/>
</script>
</body>
<script type="text/javascript">
Vue.component("mycomponent",{
template:"#mytemplate"
}),
new Vue({
el:"#app",
components:{
incomponents:{
template:"#mytemplate"
}
}
})
</script>
6.如何获取动态元素
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<!--
注意：如果组件要获取动态元素，它不是找的vue中的data属性，而是找template中的data属性
模板中data对应的值，必须是一个函数 并且在函数内部返回的值必须是json对象
-->
<template id="mytemplate">
<!--动态获取的用户名它不会去Vue实例中获取，而是会从组件的方法中进行获取-->
<h1>欢迎{{userInfo}}登陆系统欢迎{{age}}</h1>
</template>
</body>
<script type="text/javascript">
Vue.component("mycomponent",{
template:"#mytemplate",
data:function () {
return{
userInfo:"有感觉了吗",
age:20
}
}
})
new Vue({
el:"#app"
})
7.vue路由
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--引入路由-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<!--
路由： 路由是负责将进入的浏览器请求映射到特定的组件代码中
url地址映射到组件（html代码）
做路由：
1.准备组件
2.映射关系（url映射组件）
3.告诉vue我要使用路由
4.组件渲染的位置
-->
<div id="app">
<!--准备3个超链接，类似a标签-->
<router-link to="/employee">员工页面</router-link>
<router-link to="/dept">部门页面</router-link>
<router-link to="/product">产品页面</router-link>
<!--组件渲染位置-->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
/*准备组件*/
let Employee = Vue.component("employee",{
template:"<h1>员工页面</h1>"
})
let Dept = Vue.component("dept",{
template:"<h1>部门页面</h1>"
})
let Product = Vue.component("product",{
template:"<h1>产品页面</h1>"
})
/*路径映射*/
var router = new VueRouter({
routes:[
/*路径映射到文件*/
{path:"/employee",component:Employee},
{path:"/dept",component:Dept},
{path:"/product",component:Product},
]
});
new Vue({
el:"#app",
/*我要使用路由
* 这里本来应该写为router:router，但是因为名字一样，所以可以简写
* */
router
})
</script>
8.vue生命周期，主要掌握两个
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--引入路由-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"你好啊"
},
methods:{
sayhello(){
alert("弹弹弹")
}
},
/*生命周期只需要注意两个一个created可以调用方法和数据
* 如果在这里修改了数据，在mounted里面也是会随之显示修改后的数据
* */
created(){
alert("msg"),
this.msg="bbbb"
},
/*mounted加载完毕*/
mounted(){
alert("------======"+this.msg);
}
})
</script>
9.vue计算时间
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--引入路由-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="app">
{{birth}}<br/>
{{salary}}<br/>
<input type="text" v-model="message">
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
/*我们希望在页面显示的是年月日，而不是毫秒值*/
birthday:1429032123201, // 毫秒值
message:""
},
computed:{
birth(){
return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"
},
salary(){
return 30*20+100
}
},
/*主要是监听值得变化*/
watch:{
message(newVel,oldVel){
console.debug("新值"+newVel)
console.debug("旧值"+oldVel)
}
}
})
</script>
10.vue的导出导入
a.js作为导入
/*这是ES6的方式*/
/*导入方式一
* 只要导出得时候有名字，都需要在名字加上花括号
* */
/*
import {util} from "./b";
let sun = util.sun();
alert(sun+2)*/
/*导入方式二*/
/*import {util} from "./b";
let sun = util.sun();
alert(sun-2)*/
/*导入方式三,没有名字得默认*/
/*import xxx from "./b"
let sun = xxx.sun();
alert(sun*3)*/
/*导入多个*/
import {util,util1} from "./b";
let sum = util.sum();
let sum1 = util1.sum1();
alert(sum+sum1+20)
b.js作为导出
/*导出方式一*/
/*
export const util={
sun(){
return 2;
}
}*/
/*导出方式二*/
/*const util={
sun(){
return 2;
}
}
export {util}*/
/*导出方式三*/
/*export default {
sun(){
return 10;
}
}*/
/*导出多个*/
export const util={
sum(){
return 12;
}
}
export const util1={
sum1(){
return 20;
}
}
html里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>
在控制台输入
webpack ./js/a.js -o ./dist/bundle.js
这里根据自己创建的路径来进行打包，这里我写的是我自己创建的路径
11.commonjs
c.js导入
//引入d.js的文件
let d = require("./d")
let c = "c模块"
console.debug(c,d);
require("../css/index.css")
d.js导出
/*commonjs语法规范*/
define(function () {
return "d模块"
})
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="dist/bundle2.js"></script>
</head>
<body>
</body>
</html>
12.引入css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="dist/bundle3.js">
</script>
</head>
<body>
<span class="span">你绿色了啊</span>
</body>
</html>
css
.span{
color: chocolate;
background-color: chartreuse;
}
js
require("../css/index.css")
需要引入两个
npm install style-loader --save-dev
npm install css-loader --save-dev
在webpack.config.js引入
配置了这个了就可以直接输入webpack了，它会自动去寻找
//引入的路径模块
const path = require('path');
/*这是为了每次在输入打包webpack指令更简单*/
module.exports = {
//打包的入口
entry: './js/c.js',
//出口
output: {
//当前项目下面的dist目录
path: path.resolve(__dirname, 'dist'),
//最终打包文件的名字
filename: 'bundle3.js'
},
/*用css的话需要在这里进行这个配置*/
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
};
13.热更新
在package.json中配置script
“scripts”: {
“dev”: “webpack-dev-server --inline --progress --config ./webpack.conf.js”, },
然后将它的版本更改为兼容版本
"webpack": “^3.10.0”,
"webpack-dev-server": “^2.9.7”
14.脚手架vue-cli
使用它能快速的构建一个web工程模板
14.1先输入安装命令
npm install -g vue-cli
14.2输入指令
vue init webpack
14.3安装过程
yes 一路回车 yes no no no
14.4如何看
先去找到package.json，在里面找到dev
在后面发现一个路径build/webpack.dev.conf.js
去找到这个路径，去里面寻找entry入口，发现没有，凭感觉找到./webpack.base.conf这个基包
在基包中找到入口’./src/main.js’，然后进入这个页面
这个页面顶部有三个导入，这个和前面写的标签是一个意思，就是引入
在下面代码中有下面二段代码
第一个表示引入App
第二个表示默认
在头部还有路由，点进路由
components: { App },
template: '<App/>'
路由的头部引入helloword，后面跟着路径，里面就是运行时显示的文字
而图片则是在App中引入的
来源：CSDN
作者：你这秃驴又和老衲抢师太
链接：https://blog.csdn.net/weixin_45624614/article/details/103798582