vue1.0.js的初步学习

vue.js是一个mvvm框架

{{.....}} 常用模板渲染方式

v-model ：将对应变量的值的变化反映到input的vaule中

vue.js 的一个组件 .vue文件包含<templete>(html标签)<style>

html ---> template 
 css ----> style
 js ----> script（css格式），<script>（js代码）

从*.vue到页面

利用webpack插件打包工具打成html（展示层）, js（新的vue对象，module层）和css
案例
html

<div id="ip">

{{message}}

</div>

js

new Vue({
el:"#ip",
data：{
message：“Hello  Vue.js”
}
})

实例化vue对象设置它的属性的参数

1、data--数据存储
2、methods--方法存储  (其中方法可以直接通过  this.名字 访问data中的数据)
3、watch--数据改变事件监听

watch：里面的deep参数是深层复制的意思，表示如果监听的是数组，数组里面有两个值，只有一个值改变的时候也会被监听到，如不加deep可能监听不到值变化

Vue 对象设置由 Html 指令关联执行。即模板指令
重要指令：
v-text="a"  v-html="a"(dom标签不会显示在页面中)  {{ a}} 渲染数据    data的属性
v-if       v-show控制显示 两种显示方式
v-on 绑定vue的事件       method的方法     v-on:click="doThis"  ======@click="doThis"
v-for="item in items" 循环渲染数据           data的属性
v-bind属性绑定     v-bind:src=""  =======：src=“”  src属性   
                  　：class=“{red：  isRed}” red是class名  isRed是判断是否在此dom中拥有此class  
                    ：class=“[classA,classB]”      data中　　
　　　　　　　　　　　 ：class=“[classA,{calssB:isB,classC:isC}]”

index.html是所有项目的入口

<app></app>标签。是一个组件,会将App组件转为小写。此组件写在src目录下的main.js中（app是app.vue中的）

　　　　app.vue

　　<template> <hello></hello> </template>

<script> import Hello from ‘./components/Hello’

　　　　　　　　export default{

　　　　　　　　 components:{Hello}

　　　　　　}　

　 </script>

Hello.vue

<template><h1>{{message}}</h1></template>

<script>

export default{

data(){

return {

message: 'Hello World!'

}

</script>

data(){ return{...} } => function data(){ return{...} } => data: function(){ return{...} }

import App from './app';等价于var app=require('./App')

export default{ components:{Hello}} 　在项目中会自动生成 new Vue({})

export 的东西就是new Vue({xxx})中的参数{xxxApp.vue文件里的<script></script>里的export default{

    components:{
        Hello
    }
}

导出组件Hello
在解析时会自动变成new Vue({components:{Hello}})

在src目录下创建 store.js

const  STORAGE_KEY='todos-vuejs'
export default(
   fetch(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');},
   save(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))}
);


如何调用store

在App.vue的js中
import Store  from ./store.js’
console.log(Store);
Store.save();放入数组
Store.fetch();  获取数据

Vuejs开发环境的搭建（使用命令行工具）

安装（vue-cli的安装（条件 node.js大于4.0版本 git ） vue-cli优势：会提供webpack打包等功能）

http://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  安装cnpm替代npm  第一步
cnpm -v  第二步
cnpm install -g vue-cli   第三步
vue  第四步
vue init webpack my-project  第五步 （创建一个基于webpack模板的新项目）若此命令报错   即是node版本过低，需要升级  至少版本是 6.6.6（node.js版本更换为6.11.4就可以啦，原来是4.4.4版本的不支持ES6的语法。let, const, function, class均为ES6的语法）
回车
描述信息
No
No
No
cd my-project
vi  package.json  进入package。json中看里面的内容（dependencies：依赖  devDependencies：开发的依赖）   https://www.cnblogs.com/youge/p/4556886.html       vi 命令失效，安装vi解释器
cnpm instal 回车        安装所有的依赖（在项目中多了一个node_modules目录）
cnpm run  dev（其中vi package。json 中scrites  中dev：“node build/dev-server.js”  ）
             (此命令出现监听端口localhost：8080)

接下来在我的项目中 在src中的App.vue中来进行具体的开发（热更新你改的东西页面中会自动更新） vue list 查看官方提供的模板

ctrl+c  退出运行

一、使用npm 安装一个模块 n 到全局

npm install -g n

若报错 npm install -g n --force 此命令可解决该问题若此命令报错（

ERROR: npm is known not to run on Node.js v4.6.0
Node.js 4 is supported but the specific version you're running has
a bug known to break npm. Please update to at least 4.7.0 to use this
version of npm. You can find the latest release of Node.js at https://nodejs.org/

）即是 node.js版本比较差

二、使用 n 加版本号就可以安装其他版本，比如：

n 6.11.3

三、再使用 n ，通过上下键，就可以选择不同的版本啦

(注意，是从低版本升到高版本时多版本共存；如果是已经安装了高版本，再安装低版本时，高版本就没有了）

windows 下更新 npm 和 node

http://blog.csdn.net/doitplayer/article/details/71077333

公司的新项目要启动了，需要使用 Angular 4.0，并且使用 webpack 工具进行打包。所以就需要安装 node。node 的安装很简单，在 node 的官网 nodejs.org 去下载 msi 安装包，目前 node 最新的版本是 v8.1.2(打开这个官网，会根据你的系统为你推荐最合适的版)