Vue.js知识点

Vue.js知识点：
1.准备工作：
(1)安装node.js
（2）安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
（3） 安装vue的命令行工具：npm install --global vue-cli
（4）创建项目：vue init webpack-simple v1（在cmd上）
（5）用vscode打开项目，打开命令窗口
（6）安装项目依赖：cnpm install
（7）运行项目：npm run dev

2.数据绑定、渲染:
(1)所有的内容要被一个根节点包起来

<template>
   <div>

   </div>
</template>

（2）data中定义数据（变量）

data () {
   return {

   name:'qq',
    age:20,
    isRed:true,
    list:['足球','篮球']
 };

(3)渲染单个变量，数组

<template>
 <div>
   <!-- {{name}}--{{age}}
   <br>
     <ul>
       <li v-for="(item,index) in list" :key="index">
            {{item}}
       </li>
   </ul>
 <br>
</div>
</template>

<script>
export default {
data () {
   return {

     name:'qq',
     age:20,
     isRed:true,
    list:['足球','篮球']

   };
 },
 methods:{ } ,
 
 compomons:{  }

 mounted() { },
};
</script>

<style lang="scss">
</style>

（4）绑定属性 v-bind属性名=“变量名”，v-bind可以省略掉

<template>
 <div>
  <!-- {{name}}--{{age}}
   <br>
     <ul>
       <li v-for="(item,index) in list" :key="index">
            {{item}}
       </li>
   </ul>
  <div v-bind:class="{red:isRed}">v-bind测试</div>
  <button @click="changeColor()">改变颜色</button>
   <button @click="changeName()">改变name</button>
 </div>
</template>

<script>

export default {
data () {
   return {

     name:'qq',
     age:20,
    isRed:true,
     list:['足球','篮球']

   taskName:'',
   taskList:[]

   };
 },
 methods:{
    changeColor(){
     this.isRed=!this.isRed
   },
    changeName(){
     this.name=this.name+'QQ'
   }
,
  compomons:{
    
  }

 mounted() {
 },
};
</script>
.red{
  color:red;
}
.blue{
 color:blue;
  }
<style lang="scss">

（5）双向数据绑定v-model 配合input控件使用

<template>
 <div>
   <!-- {{name}}--{{age}}
   <br>
     <ul>
       <li v-for="(item,index) in list" :key="index">
            {{item}}
       </li>
   </ul>
  <div v-bind:class="{red:isRed}">v-bind测试</div>
  <button @click="changeColor()">改变颜色</button>
   <button @click="changeName()">改变name</button>

   <input type="text" v-model="name"> -->

   <br>

 </div>
</template>

<script>

export default {
data () {
   return {

   name:'qq',
     age:20,
    isRed:true,
     list:['足球','篮球']

    taskName:'',
    taskList:[]

   };
 },
 methods:{
   changeColor(){
     this.isRed=!this.isRed
   },
    changeName(){
     this.name=this.name+'QQ'
    }
 
  }
  ,
  compomons:{
    
  }

  mounted() {
 },
};
</script>

<style lang="scss">

.red{
color:red; 
}
.blue{
 color:blue;
}

</style>

（6）案例todolist:(注释快捷键：ctrl+/)
（7）localstorage本地储存
（8）绑定事件v-onclick ，可以简写成@click
$event:事件对象
可以获取键盘的属性
vue文件：

<template>
 <div>

   <router-view></router-view>

   <!-- {{name}}--{{age}}
   <br>
     <ul>
       <li v-for="(item,index) in list" :key="index">
            {{item}}
       </li>
   </ul>
  <div v-bind:class="{red:isRed}">v-bind测试</div>
  <button @click="changeColor()">改变颜色</button>
   <button @click="changeName()">改变name</button>

   <input type="text" v-model="name"> -->

   <!-- <input type="text" v-model="taskName"><button @click="addTask()">添加任务</button> -->
   <!-- <input type="text" v-model="taskName" @keyup="addTask($event)">

   <br>
   <div>未完成列表:</div>
     <ul>
       <li v-for="(item,index) in taskList" :key="index" v-if="!item.done">
         <input type="checkbox" v-model="item.done" @change="doneTask()">
           {{item.name}} <button @click="delTask(index)">删除任务</button>
       </li>
   </ul>

    <div>已完成列表:</div>
     <ul>
       <li v-for="(item,index) in taskList" :key="index" v-if="item.done">
           <input type="checkbox" v-model="item.done" @change="doneTask()">
           {{item.name}}
       </li>
   </ul> -->

 </div>
</template>

<script>
import {storage} from './common/storage'

export default {
data () {
   return {

   //  name:'qq',
   //  age:20,
   //  isRed:true,
   //  list:['足球','篮球']

   // taskName:'',
   // taskList:[]

   };
 },
 methods:{
   // changeColor(){
   //   this.isRed=!this.isRed
   // },
   //  changeName(){
   //   this.name=this.name+'QQ'
   // }
    addTask(e){
         if(e.keyCode == '13'){
            this.taskList.push({ name:this.taskName, done:false});
           storage.set('taskList',this.taskList)
            localStorage.setItem('taskList',JSON.stringify(this.taskList))
       }
     
    },
    delTask(index){
     this.taskList.splice(index,1);
     storage.set('taskList',this.taskList)
   localStorage.setItem('taskList',JSON.stringify(this.taskList))
   },
   doneTask(){
   storage.set('taskList',this.taskList)
  localStorage.setItem('taskList',JSON.stringify(this.taskList))
   }
  }
  ,
  compomons:{
    
  }

  mounted() {
  if(storage.get('taskList') != null ){
         this.taskList=storage.get('taskList')
   }

 },
};
</script>

<style lang="scss">

// .red{
//   color:red;
// }
// .blue{
//   color:blue;
// }

</style>

js文件：

import { get } from "https";

var storage={

    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    },
    get(key){
      return  JSON.parse(localStorage.getItem(key))
    },
    del(key){
        localStorage.removeItem(key)
    }
}

export {storage}

3.路由:
作用：动态挂载组件
参考官网：https://router.vuejs.org/zh/
(1)安装cnpm install vue-router --save
(2)在main.js文件中引入并使用：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

(3)定义路由

const routes =[
// {
//   path:'/',
//   redirect:'/home/college'
// },
{
  path:'/home',
  component:Home,
  children:[
    {
      path:'college',
      component:College,
    },
    // {
    //   path:'major/:id',
    //   component:Major,
    // },
    {
      path:'major',
      component:Major,
    },
    {
      path:'teacher',
      component:Teacher,
    },
  ]
}
]

(4)创建router实例，然后传‘routes’配置
const router = new VueRouter({ mode:'history', routes })
（5）创建和挂载根实例
记得要通过router配置参数注入路由
从而让整个应用都有路由功能
new Vue({ router, el: '#app', render: h => h(App) })
（6）根组件放置：

 <router-view></router-view>

（7）嵌套路由：
如：
<router-link :to="'/home/major/'+item.id"> {{item.name}}</router-link>