vue学习笔记（一）

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V值得是视图，VM是视图模型，将数据绑定视图上（双向绑定）

一 安装

1 安装开发工具：Visual Studio Code
2 安装开发环境:Node.js
安装完成之后，打开命令行工具，输入 node -v，如果出现相应的版本号，则说明安装成功。
3 安装cnpm
运行命令：npm install -g cnpm –registry=http://registry.npm.taobao.org
4 安装vue-cli脚手架构建工具
运行命令：npm install -g vue-cli
5 用vue-cli构建项目
报错：

 Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

解决：输入命令：npm install -g @vue/cli-init
运行命令：vue init webpack vue-project
6 安装项目所需依赖
首先切换到项目所在目录，然后运行命令 cnpm install ，等待安装。
7 运行项目
在项目目录中，运行命令 npm run dev

二 项目实例

1 条件判断：v-if指令

 <div id="app">
    {{message}}
   <p v-if="ok">
     ok
   </p>
   <template v-if="yes">
     <h1> 学习vue</h1>
     <p>学的不仅是技术，更是梦想</p>
   </template>
  </div>

<script>
export default {
  name: 'App',
  data(){
    return{
     message:'Hello Vue',
     yes: true,
     ok:true
    }
  }
  }
</script>

2 循环：v-for指令

  <ol>
        <li v-for="uname in unames" v-bind:key=uname>
          <p>  {{uname.name}}  </p>
        </li>
   </ol>

 unames: [
      { name: 'xiaoming' },
      { name: 'xiaohong' },
      { name: 'xiaohua' },
      { name: 'xiangfang' }
    ]

3 事件
（1）点击事件

 <button v-on:click="counter+=1">我是按钮</button>
     <p>这个按钮被点击了{{counter}}次。</p>

4.表单:v-model(v-model 指令在表单控件元素上创建双向数据绑定)
(1) 输入框 input 和 textarea

  <p>input：</p>
     <input v-model="message" placeholder="单行文本输入">
     <p>{{message}}</p>
     <p>textarea：</p>
     <p style="white-space:pre">{{message}}</p>
     <textarea v-model="message" placeholder="多行文本输入"></textarea>
  </div>

（2）复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组

     <p>单个复选框：</p>
     <input type="checkbox" v-model="checked">
     <p>多个复选框：</p>
     <input type="checkbox" id="apple" value="apple" v-model="checkeds">
     <label for="apple">苹果</label>
      <input type="checkbox" id="banana" value="banana" v-model="checkeds">
     <label for="banana">香蕉</label>
      <input type="checkbox" id="mango" value="mango" v-model="checkeds">
     <label for="mango">芒果</label>
     <input type="checkbox" id="strawberry" value="strawberry" v-model="checkeds">
     <label for="strawberry">草莓</label>
     <span>选择的值为:{{checkeds}}</span>

（3） 单选按钮

    <input type="radio" id="man" name="sex" value="男" v-model="sex">
    <label for="man">男</label>
    <input type="radio" id="woman" name="sex" value="女" v-model="sex">
    <label for="woman">女</label>
    <span>选择的值为:{{sex}}</span>

（4）select选择

    <select name="fruit" v-model="fruit">
       <option value="">选择一种水果</option>
       <option  value="苹果">苹果</option>
       <option  value="香蕉">香蕉</option>
       <option  value="葡萄">葡萄</option>
    </select>
    <span>选择的水果为:{{fruit}}</span>

4.组件（Component）：全局组件、局部组件。

三.VUE-AJAX通信

1.Vue-resource:
(1) 安装指令：npm install vue-resource
(2) 在vue之后导入文件

在main.js中导入：
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)

(3)HTTP请求
GET请求（无请求数据）

 methods:{
    get:function(){
      this.$http.get('后端url地址').then(function(res){
       console.log(res.body)
      },function(){
        console.log('请求失败处理')
      })
    }
  }

GET请求（需要传请求数据）

    get:function(){
      this.$http.get('后端url地址',{a:1,b:2}).then(function(res){
        console.log(res.body);
      },function(res){
        console.log('请求失败处理')
      })
    }

POST请求（需要传请求数据）

    post:function(){
      this.$http.post('后端url地址',{a:1,b:2,c:{
            "d":1,
            "e":""
        }},{emulateJSON:true}).then(function(res){
           console.log(res.body);
        },function(res){
            console.log('请求失败处理')
        })
    }

四 VUE-UI框架Element-UI

1.安装element-ui
cli 2.0安装:npm i element-ui -s
cli 3.0安装:vue add element-Import on demand-vue add element-uI
2.引入使用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en'  由于其组件内部默认使用中文，可以设置为使用英文
Vue.use(ElementUI,{locale})

3.Layout布局
24分栏布局

<el-row>
  <el-col :span="8"><div class=""></div></el-col>
  <el-col :span="8"><div class=""></div></el-col>
  <el-col :span="8"><div class=""></div></el-col>
</el-row>

4.Tabs切换组件
5.自定义主题
(1) 安装主题生成工具

// 首先安装主题工具
npm i element-theme -g
// 安装主题
npm i element-theme-chalk -D

(2) 初始化变量文件:et -i
et-w:启用watch模式

五 VUE-路由Vue-router

(1) 安装：npm install vue-router
(2) 引用

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

(3)报错：

Failed to compile.
./src/router/index.js
Module not found: Error: Can't resolve './views/admin/Login.vue' in 'D:\project\vue\vue-demo\src\router'
 @ ./src/router/index.js 13:13-46
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

六 Vue-Cli3

1.Vue-Cli3.0安装
卸载老版本:npm uninstall -g vue-cli
下载新版本:npm install -g @vue/cli

七 Promises 异步编程

八 Vue模板

1.安装Vetur，识别vue文件

九 断点调试

1 安装插件：Debugger for Chrome

十 Echarts

1.安装：npm install echarts -S
2.引入

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

十一 Mock:模拟后端数据

1.安装：npm install mockjs --save-dev
2.引入mockjs: import ‘@/mock/index.ts’;
3.使用
(1) 在项目根目录下创建mock目录