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\nodejs 文件夹下,点击下一步即可完成安装。

公司的电脑是第一次安装 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\nodejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同,只是安装路径选择为同之前一样的路径。

之后再去看 node 的版本:

更新到 v8.1.2 了。

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

 

vue1.0.js的初步学习的更多相关文章

  1. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  2. angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习

    废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...

  3. js map()初步学习

    //array.map(callback,thisObject?),callback需要有return值 //map:'映射' 被映射成新的数组  eg1: let data = [3,4,2]; l ...

  4. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  5. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  6. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  7. 以太坊web3开发初步学习

    以太坊web3开发初步学习 此文是对https://learnblockchain.cn/2018/04/15/web3-html/的学习再理解. 以太坊智能合约通过使用web3.js前端和智能合约交 ...

  8. js callee,caller学习

    原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...

  9. 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统

    首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...

随机推荐

  1. SGU495Kids and Prizes 数学期望

    题意: 有n个奖品,m个人排队来选礼物,对于每个人,他打开的盒子,可能有礼物,也有可能已经被之前的人取走了,然后把盒子放回原处.为最后m个人取走礼物的期望. 题解: 本道题与之前的一些期望 DP 题目 ...

  2. appium的截图

    在实际自动化项目运行过程中,很多时候App可以会出现各种异常,为了更好的定位问题,除了捕捉日志我们还需要对运行时的设备状态来进行截屏.从而达到一种“有图有真相”的效果. 截图方法 方法1 save_s ...

  3. UNIX C 进程Part2

    1.获取进程ID #include <unistd.h> pid_t getpid(void); //获取子进程id pid_t getppid(void);//获取父进程id 2.获取实 ...

  4. linux邮件服务

    linux本地常见邮件服务有: Centos5:默认使用sendmail邮件服务,开启方式/etc/init.d/sedmail start Centos6:默认使用postfix邮件服务,开启方式/ ...

  5. 【[Offer收割]编程练习赛15 B】分数调查

    [题目链接]:http://hihocoder.com/problemset/problem/1515 [题意] [题解] 带权并查集 relation[x]表示父亲节点比当前节点大多少; 对于输入的 ...

  6. PHP学习总结(13)——PHP入门篇之常量

    1.什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量(后续小节会详细介绍). 自定义常量是 ...

  7. sqlserver日志文件太大解决方法

    SQL Server 的事务日志意外增大或充满的处理方法 事务日志文件Transaction Log File是用来记录数据库更新情况的文件,扩展名为ldf. 在 SQL Server 7.0 和 S ...

  8. 如何让 Windows 上的命令行工具更好用

    侯爵老师视频详解:如何让 Windows 上的命令行工具更好用 很多 Windows 用户在打开这个小黑窗时,都会情不自禁的感慨,「实在是太丑了--」 实际上如果你用的是 Windows 8 或 Wi ...

  9. ExtJs之Ajax模式的表单数据加载

    简单: <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-e ...

  10. 关于bitnami redmine 的一些问题

    http://blog.csdn.net/yanyaming920817/article/details/50059523