Vue需了解知识

vue-validator：表单验证的组件；

vue-devtools：chroma的开发者工具；

vue-router：路由；

vue-cli：脚手架；

vue-touch：移动端开发工具；

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护；

vuex：vue的模块管理工具；

划分组件！

v-text = {{}}+js数据

v-html在v-text基础上会自动解析标记语言

vue的重要选项和指令

创建元素的时候，vue会将驼峰形式的标签转化成小写的-横杠链接的形式。。。

comopents:{ ComponentA}
<component-a></component-a>

isFinished状态切换（样式切换等）

isFinished的使用

cnpm代替默认的npm（因为npm在国内网络下很慢）

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

store,js

const STORAGE_KEY = ‘todos-vuejs’

export defaule{    fetch:function(){   returnJSON.parse(window.localStorange.getItem(STORAGE_KEY) || '[]')
 },
save:function(items){                    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
        }
}

1.5vuejs基础框架代码

根目录下的index.html：项目入口，里面的标签<app></app>在vue中即表示载入组件app,入口文件默认调在src里的main.js，main.js里注册组件app这样才能使用，main.js中会写明组件来自于App.vue,

即import App from './App',import是es6的语法含义类似

var App=require('./App')

在App.vue中通过<template>,<script>,<style>共同具体实现app组件

export是es6语法，与import类似

data(){

    return {};

}是es6中的语法相当于

function data(){

    return {};

}

1.4vuejs组件的重要选项

new Vue({

data:{

    a:1,

    b:[]

},

methords:{

    doSomething:function(){

        this.a++

    }

},

watch:{

    'a':function(val,oldVal){

        console.log(val,oldVal)

    }

}

})

模版指令是html和vue对象的粘合剂，其写在html中，常用的数据渲染模版指令有

v-text:处理了html格式

v-html:保存了html结构,{{}}

v-if:控制是否渲染相当于jquery中的remove,

v-show:控制显示隐藏display:none

渲染循环列表v-for

事件绑定v-on有两种书写方式,绑定的是methods中的方法

<button v-on:click="doThis"></button>

<button @click="doThis"></button>

属性绑定v-bind

<img v-bind:src="imageSrc">

<div :class="{red:isRed}"></div>

1.3*.vue到页面

通过webpack这类打包工具将*.vue文件解析为*.html,*.js,*.css

其中js就是个view对象，vue对象就是数据层model,展示层就是html。

 1.2vuejs开发环境搭建

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。

nodejs官网https://nodejs.org/zh-cn/下载nodejs安装选择add tp path

https://git-scm.com/downloads下载安装git

若改变默认路径将其安装到d:\nodejs才有以下操作，

可安装后运行cmd输入命令

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

将node_global,node_cache都移到D:\nodejs目录下 ，并将我的电脑》属性》高级系统设置》环境变量》系统变量

添加变量名Node_Path值为D:\nodejs\node_global\node_modules即将默认模块路径D:\nodejs\node_modules改为上面路径

输入命令

#全局安装vue-cli

cnpm install -g vue-cli

#创建一个基于webpack模版的新项目（创建的位置就在cmd当前目录下）

vue init webpack my-vue001

#进入项目目录安装依赖并运行

cd my-vue001

npm install

npm run dev