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