Vue.js兼容性
Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器。
Vue.js安装
安装方式有两种:
1、直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告)
2、使用cdn方法引入
3、npm安装
npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs
附上一小段nvm使用的命令:
$ nvm install v6.10.2
$ nvm list
* 6.10.2 (Currently using 64-bit executable)
$ nvm use 6.10.2
Now using node v6.10.2 (64-bit)
$ node -v
v6.10.2
$ npm -v
3.10.10
$ npm install Vue.js
或者:
$ cnpm install bower
$ bower install Vue.js
注意:可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装Vue.js等模块了:
Vue.js脚手架安装
# 全局安装 Vue.js-cli
$ npm install --global Vue.js-cli
# 创建一个基于 webpack 模板的新项目
$ Vue.js init webpack my-project
# 切换到项目目录,安装依赖
# 下面出现的所有提示 直接回车则选择默认选项或者yes
$ cd my-project
$ npm install
# 运行该项目
$ npm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
* 这里默认8080端口,如果想要更改指定端口,找到根目录下config文件夹---index.js
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
port可以改成我们指定的端口,这里不仅可以改变端口,还可以根据需要改变其他配置信息。
建好Vue.js项目之后,想要再次localhost:8080下运行起来,在cmd命令框,进入项目根目录文件夹路径下,然后
npm run dev,则他会运行dev-sever.js文件,之后运行成功,页面自动打开。
Vue.js起步
var app1=new Vue.js({
el:"#app1",
data:{
message:"hahahha"+new Date()
}
});
Vue.js 实例化代码可以直接写new Vue.js,也可以赋个值,当实例化的Vue.js赋值给一个变量之后,在控制台可以直接通过改app1.message等代码,在浏览器可以直接看到页面效果。
<div id="app3">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
var app3 = new Vue.js({
el:"#app3",
data:{
todos:[
{text:"aaa"},
{text:"bbb"},
{text:"ccc"},
&