Vue学习
loader (在导入模块暴露出来的资源的时候，分析资源是否是js，如果不是，怎么能把他转化成js能够理解的方式，最后穿插到html里)
import '../css/base.css'; //index.js
npm i css-loader style-loader -D //安装loader依赖
module.exports = { //webpack.config.js
entry:'./js/index',
output:{
filename: 'bundle.js',
path: __dirname + '/dist',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader'],
}
]
}
}
在node的眼里，所有的文件都是一个模块，任何一个模块都可以有2个口，一个是入水口，一个是出水口
局部安装webpack：(webpack: 把后端代码前端化)
npm init -y //初始化package.json包 npm i webpack --save-dev //局部安装 "scripts": { //package.json中定义快捷方式 "pack": "webpack --watch"
},
module.exports = { //webpack.config.js 配置入口文件、出口文件
entry: {
home: './js/home.js',
signup: './js/signup.js',
},
output: {
filename: '[name].bundle.js', //name: entry的键名
path: __dirname + '/dist', //node中特殊的变量，当前文件所在的目录
}
}
npm run pack
base.js：
let open = true;
export {open};
home.js
import {open} from './base';
if(open) {}
npm: node 包 管理工具
npm -v // 版本
npm install npm@latest -g //安装最新的(latest)稳定版本 -g全局环境
npm init -y //初始化,生成 package.json 包(里边有依赖信息)
npm i jquery //安装依赖 安装到 node_moudles 目录里
npm update jquery //更新依赖
npm uninstall normalize.css //删除依赖
npm i jquery@3.0.0 // 安装依赖指定版本
npm i //根据package.json包中的依赖信息，安装相应的node_modules库
npm i webpack --save-dev //save到package.json文件, dev开发(development), dependencies(生产)依赖，devDependencies开发依赖
npm i webpack -D
//依赖的目录: node_modules/vue/dist/vue.js
vue-router 导航钩子
let routes = [
{
path: '/a',
meta: {
login_required: true,
},
component: {
template: `
<div>A</div>
`,
},
},
];
router.beforeEach(function(to, from, next) {
let logged_in = false;
if(!logged_in && to.matched.some(function(item) { //如果没有登录 并且 要求登录
return item.meta.login_required;
}))
next('/login');
else
next();
});
vue-router 命名视图
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
let routes = [
{
path: '/user',
components: {
sidebar: { //sidebar 就等于 componet
template: `
<div>
<li>用户列表</li>
<li>权限管理</li>
</div>
`,
},
content: { //content 就等于 component
template: `
<div>
111Lorem
</div>
`,
},
},
},
];
vue-router 手动访问和传参
let routes = [
{
path: '/user/:name',
name: 'user',
component: {},
},
]
this._router.push({name: 'user', params: {name: '李拴蛋'}});
vue-router 子路由
let routes = [
{
path: '/user/:name',
component: {
template: `
<div>
{{$route.params.name}}
<router-link to="more" append>更多</router-link>
<router-view></router-view>
</div>
`
},
children: [
{
path: 'more',
component: {
template: `
<div>{{$route.params.name}}</div> //继承
`
},
},
],
},
]
vue-router 2种传参方式
<router-link to="/user/王花花?age=10">王花花</router-link>
path: '/user/:name',
component: {
template: `
{{$route.params.name}}
{{$route.query.age}}
`
}
vue-router 配置
<router-link to="/">首页</router-link>
<router-view></router-view> //渲染
let routes = [ //定义路由规则 routes
{
path: '/',
component: {
template: `<div>首页</div>`
},
},
];
let router = new VueRouter( //实例化路由
{
routes: routes,
}
);
new Vue({ //传入Vue
el: '#app',
router； router,
})
<task :prop="todo"></task>
//把子组件（task）的 prop值 设为 todo
//prop是子组件里边的props，todo是父组件（vue实例）传进去的值
<template id="task-tpl">
<div>
{{prop.title}}
</div>
</template>
Vue.component('task', {
template: '#task-tpl',
props: ['prop'],
});
Vue.component();
Vue.filter();
Vue.directive();
Vue.Event();
Vue.set(this.list,index,copy(this.current)); //vue中数组的元素修改
new Vue({
el: '#main',
data: {
list: [],
},
mounted: function(){},
methods: {},
computed: {},
components: {},
watch: {},
});
js中为false的情况
null
undefined
0
NaN
''
null == false //false
undefined == false //false
0 == false //true
NaN == false //false
'' == false //ture
立即执行函数
;(function() {
})();
// 写了一个匿名函数，并且触发他
// 好处：创建一个独立的作用域，这个作用域里边的变量，外边访问不到（避免‘变量污染’）
slot 插槽，占位
//在 component 中 template 里设置 <slot name="content">默认值</slot> //在 自定义标签中，以属性的形式调用 <panel><div slot="content">yo yo yo</div></panel>
mixins 混合，重复功能和数据的储存器
let base = { methods:{}, data:{} } //调用：mixins[base],
Vue.component('alert', { //组件 template: '<button>弹弹弹</button>' }) //<alert></alert> Vue.filter('currency', function(val, unit) { //过滤器 }) //<div>{{price | currency(USD)}}</div> Vue.directive('pin', function(el, binding) { //自定义指令 let pinned = binding.value; let position = binding.modifiers; let warning = binding.arg; }) // <div v-pin:true.bottom.left="card1.pinned"></div>
过滤器
{{ price | currency(USD) }}
Vue.filter('currency', function(val, unit){
val = val || 0;
unit = unit || '元';
return val + unit;
});
val = val || 0 如果val有值，val就等于val，如果没有，val就等于0
组件通信
父子组件通信： 父组件通过 msg="yo." 子组件通过 props: ['msg']
子父组件通信： 子组件通过 this.$emit('show-balance', {}) 父组件通过子元素监听 @show-balance="show_balance"
任意组件间通信： 通过全局事件调度器Event, 触发：Event.$emit('show-balance', {}), 监听：Event.$on('show-balance', function(data) {}), 需要注意this的作用域
组件
components: { alert: { template: '<button @click="on_click">弹弹弹</button>', methods: { on_click: function() { alert('Yo.'); }, }, }, }, <div id="app"> <alert></alert> </div>
实例中data是对象, 在组件中(在其他里边)data是函数返回对象
组件每用一次，都会新实例化出来一个对象，这个新实例就应该有一个新的数据，function用于指定我们怎么去生成这个新的数据
; 语句结束符
, 变量分割符
let app = new Vue({}); //app里边的this等于app，app里边组件中的this等于这个组件 (this等于他的父级对象)
computed、methods 里边是(各种)函数，函数里边调用变量用this(this == app).
computed 里边是(各种)函数返回值
在Vue里头，所有的数据都应当放到一个属性，叫data里头
v-if、v-else-if、v-else 控制流指令
<div v-if="role == 'admin'"> 管理员你好 </div> <div v-else-if="role == 'hr'"> 待查看简历 </div> <div v-else> 无权限 </div>
v-bind : 绑定属性，绑定属性的目的，是把属性后边的值变为变量
v-on: @ 绑定事件, @click="onClick"
<img :src="img">
<div :class="{active: isActive}">点我</div> // 当 isActive 为真的时候，添加 active 这个类
Vue里边如果想把一个属性的值变为变量，需要先绑定这个属性
<button onclick="onClick"></button> ==> <button @click="onClick"></button>
@click(a) : 有参数
@click : 无参数
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" @click="onClick">点我</button>
<form @keyup.enter="onKeyEnter" @submit.prevent="onSubmit">
<button type="submit">提交</button>
</form>
v-for="(todo, index) in list"
{{todo.title}} {{index}}
//list 为数组，todo为数组中的元素(一般为一个对象)，index为todo对应的下标
input、textarea、select 中的 name ==> v-model，多选在data中对应为数组
v-model、v-if、v-show
<input type="text" v-model='name'> <span v-if='name'>{{name}}</span>
v-model 的三个修饰符
v-model.lazy="name" v-model.trim="name" //去除前后空格，密码的时候不能用 v-model.number="price"
v-model 单选
<input v-model="sex" type="radio" value="male"> <input v-model="sex" type="radio" value="female"> data: {
sex: 'male',
}
v-model 多选
<input v-model="sex" type="checkbox" value="male"> <input v-model="sex" type="checkbox" value="female"> data: {
sex: [],
}
v-model select
<select v-model="dest" multiple> <option value="1">背背山</option> <option value="2">王家沟</option> </select> data: {
dest: [],
}
三元运算符（返回值）
A ? B : C
如果A为真，那么返回B, 否则返回C
或操作（赋值）
a = b || c
如果b为真，a=b; 否则, a=c
