vue学习笔记（全）

常用插件:live server ESLint vetur

安装node.js 【官网下载，安装即可】

一.准备工作

1.   安装cnpm；安装webpack；安装webpack-cli；安装vue/cli

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install webpack  -g

npm install webpack-cli -g

npm install -g @vue/cli      // @vue/cli为新版本    vue-cli为老版本  卸载老版本的命令 npm uninstall vue-cli -g

2.安装vue   

 

3.创建项目：

vue create hello-world     //可以cd到项目里，运行 cnpm install安装依赖

 4.运行项目

npm run serve

 

5.自动按需引入组件 (推荐)
-
- babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
- # 安装插件 `npm i babel-plugin-import -D`

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

 

二.绑定属性

1.绑定属性

<div v-bind:title="title">放上鼠标显示<div>   v-bind:简写： <div :title="title">放上鼠标显示<div>   title在data里定义，data里的数据用'' 单引号阔气了
:src="url"    
:class  
:title

 

2.绑定Html

<div v-html="content"></div>

<div v-text="content"></div>  

3.绑定样式：可以进行判断

<div :class="{'red':flag}"> 你好</div>   //在样式表定义red

<div :class="{'red':flag，'blue':!flag}"> 你好</div>    //只有真假，不是0 1
还有:style

 4.循环

<li v-for="item in list"> {{item}}</li>
<li v-for="(item,key) in list">{{key}} {{item}}</li>

<li v-for="(item,key) in list" ：class="{'red':key==0}">{{key}} {{item}}</li>   //第一行class="red"

 三.双向数据绑定

1.针对表单元素   绑定关键词 v-model='xx'

 

3获取vue的dom节点

节点添加标识 ref=""  如userinfo
获取DOM节点 this.$refs.userinfo
获取DOM节点的值 this.$refs.userinfo.value

 

 

四.事件与方法

1.点击事件与方法 v-on  简写@  ,方法内容放在methods里面.

2.方法与方法之间用,隔开

3.添加数据用push 如给数组list添加数据  ,this.list.push('xxxxx')    ,删除数据:this.list.splice(index,1)   删除数组开始的下标,删除1个

4.执行方法传值: 如1.@click="xx(a)"  2.方法()添加形参,3.方法内得到参数.

5.事件对象  @click="eventFn($event)"        定义对象(方法) eventFn(e)   ,,,e.xx.xx

 四.TudoList

 

this.messageArr.push(this.message)

this.messageArr.splice(index,1)

 

组件

 

 

路由：把组件按照需求自动挂载到页面。

安装：
npm install vue-router --save

导入并使用：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

给组件配置路由功能：如再main.js 配置。

// 1. 导入组件

import Home from './components/Home.vue'

import News from './components/News.vue'

import Content from './components/Content.vue'

// 2.给组件配置路由
// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，
const routes = [

  { path: '/Home', component: Home },

  { path: '/News', component: News },

  { path: '/Content/:id', component: Content },

  { path: '*', component: Home },

]

// 3.实例化路由

// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes

    mode:'history'   // (缩写) 去掉路径中的#

})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

 

根目录App.vue 可配置

    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>

    <router-view></router-view>

 

路由传递参数

{ path: '/Content/:id', component: Content },        //对应this.$route.params    如需要访问/Content/ 需要单独添加一个路由。

{ path: '/PContent', component: PContent }, //对应this.$route.query     路径/PContent可以访问，同时，可以用？id=xx传递参数