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(打开这个官网，会根据你的系统为你推荐最合适的版)

如果下载很慢，可以到我百度网盘去下载 http://pan.baidu.com/s/1jHPj2my ，下载成功后，安装即可，默认是安装到 C:Program Files odejs 文件夹下，点击下一步即可完成安装。

公司的电脑是第一次安装 node，而自己家里的电脑需要更新 node。

 

一、先说一下 npm 的更新：

查看自己的 npm 版本：

 npm -v 

查看官方文档可知，使用命令  npm install npm@latest -g 

会自动完成安装：

红色箭头所指表示安装的新的 npm 的版本号，下面是一些包文件。

安装好以后再查询版本号，就变成 5.0.3 了。

 

二、再说一下 node 的更新：

网上很多的说法都是先安装 n 模块  sudo npm install -g n   (在此之前清除 npm cache   cache sudo npm cache clean -f   )，参考的博客 http://blog.csdn.net/sruru/article/details/46301405 。

可是我的电脑执行后是这样的：

最后我是通过重新下载新版本的 msi 安装包，然后覆盖安装之前的版本来完成更新操作的。

我们在覆盖的时候要检查之前安装 node 的路径，使用命令  where node 

也就是说我之前安装在 C:Program Files odejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同，只是安装路径选择为同之前一样的路径。

之后再去看 node 的版本：

更新到 v8.1.2 了。

实际上，安装 node 会同步更新 npm 的版本号，选择了最新的 node 版本，那么 npm 固然也是最新的版本了，所以如果你只是单纯的要更新 npm 就不需要来更新 node 了。