Vue.js
定义:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合
Vue.js 目标
通过尽可能简单的 API 实现响应的数据绑定和组合的视图组
目录/文件 |
说明 |
build |
项目构建(webpack)相关代码 |
config |
配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules |
npm 加载的项目依赖模块 |
src |
包含了几个目录及文件: assets: 放置一些图片,如logo等。 components: 目录里面放了一个组件文件,可以不用。 App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。 main.js: 项目的核心文件。 |
static |
静态资源目录,如图片、字体等。 |
test |
初始测试目录,可删除 |
.xxxx文件 |
这些是一些配置文件,包括语法配置,git配置等。 |
index.html |
首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json |
项目配置文件。 |
README.md |
项目的说明文档,markdown 格式 |
参考资料: [4] |
Vue.js教程
Demo1:
{{ message }}
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Vue.js安装
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 标签引入
使用cdn方法
Staticfile CDN(国内) :https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
使用方法如例:
//script引入
{{ message }}
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
NPM方法:
#查看版本
$ npm -v
#升级
cnpm install npm -g
#升级或安装
cnpm install cnpm -g
$cnpm install vue(用vue.js构建大型应用时使用)
命令行工具
#全局安装 vue-cli
$ cnpm install --global vue-cli
#创建一个基于webpack模板的新项目
$vue init webpack my-project
#配置,默认回车
This will install Vue 2.x version of the template.
For Vue 1.x use:vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob
? Vue build standalone? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
进入项目,安装并运行:
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
{{ message }} {{name}}
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name : "Vue"
}
});
### 安装 `npm`
`npm` 全称为 `Node Package Manager`,是一个基于`Node.js`的包管理器,也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。
```
npm -v
```
### 由于网络原因 安装 `cnpm`
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
### 安装 `vue-cli`
```
cnpm install -g @vue/cli
```
### 安装 `webpack`
`webpack` 是 `JavaScript` 打包器(module bundler)
```
cnpm install -g webpack
```
{{msg}}
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
然而,挂载阶段还没开始,$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用:相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
{{msg}} Using mustaches: {{ rawHtml }} v-html="rawHtml"> {{ number + 1 }} {{ 1 == 1 ? 'YES' : 'NO' }} {{
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : 'this is should be red',
color:'blue',
number : 10,
ok : 1,
message : "asvue"
}
});
vm.msg = "hi....";
.red{color:red;}
.blue{color:blue; font-size:100px;}
var vm = new Vue({
el : "#app",
data : {
seen : true,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
// vm.url=null;
console.log('click2......');
}
}
});
class="test" v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" style="width:200px; height:200px; text-align:center; line-height:200px;"> hi vue :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}"> hi vue
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
A B C Not A/B/C v-show="ok">Hello!
var vm = new Vue({
el : "#app",
data : {
type : "A",
ok : false
}
});
{{index+1}}{{ item.message }}
{{key}} : {{ value }}
var vm = new Vue({
el : "#app",
data : {
items : [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Bar' }
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
});
var vm = new Vue({
el : "#app",
data : {
counter: 0,
// name : "vue"
},
methods:{
greet : function (str, e) {
alert(str);
console.log(e);
}
}
});
v-model="message" placeholder="edit me"> Message is:
{{ message2 }} v-model="checkedNames">
v-model="checkedNames">
v-model="checkedNames">
Checked names: {{ checkedNames }}
Picked: {{ picked }}
var vm = new Vue({
el : "#app",
data : {
message : "test",
message2 :"hi",
checkedNames : ['Jack', 'John'],
picked : "Two"
},
methods: {
submit : function () {
console.log(this.message2);
}
}
});
hi...h2
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {
count: 0
}
},
template: 'hi...
methods:{
clickfun : function () {
this.count ++;
this.$emit('clicknow', this.count);
}
}
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
}
});
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {}
},
template: 'hi...
methods:{
}
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
},
components:{
test : {
template:"h2...
"
}
}
});