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)所有的内容要被一个根节点包起来

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

data () {
   return {

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

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

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

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）根组件放置：

（7）嵌套路由：
如：
{{item.name}}