一.一些简单的话
如果你学习或者使用过angularjs(1.x),你就会非常了解指令的使用,如:ng-click ng-if ng-show ng-src。当然还有控制器和各种服务。
如果你学习或者使用过react,你就会非常了解组件的使用,同样的其实在angularjs(1.x)也有directive自定义指令创建公用模版部分。
vuejs是实现mvvm的一种框架,他没有ng那样复杂的规则和繁多的语法,而且使用虚拟dom提升了我们单页开发项目的速度。他也不想react那么的“简单”,因为他有很多常用让你处理更快速的语法和规则,学习和学会使用vuejs能让我们在以后的网站开发中多一个更多的选择(最重要的掌握vue绝对是快于ng和react的,而且有好的官网学习网站)。
你是用过ng1.x在实际项目会配合ng-ui-router,也许还有其他;你使用react会配合redux和react-router和其他中间件。
同样的vuejs配合的就是vue-router和vuex,也许对于ajax的处理你还需要一个框架!
二.webpack+vue-cli搭建应用
我们这里不会使用类似jq的方式,在index.html引入一个类库去学习如何使用,我们会直接使用vue的构建工具直接在构建好的项目下学习vuejs,如果不知道webpack(https://my.oschina.net/tbd/blog/1541956)
如果不知道如何安装和使用vue-cli:
首先安装node(百度,系统?64?32?选择安装)
node -v
npm -v
监测是否安装
webpack安装:
npm install -g webpack 全局安装
npm install webpack 项目下安装
Vue脚手架安装:
vue-cli
安装:
npm install -g vue-cli 全局安装
npm install vue-cli 项目下安装
创建项目:
vue init webpack-simple study-vue (描述,作者,是否使用sass,我们no?敲入n)
cd study-vue 切换到创建的项目
三.修改显示内容
上面的安装非常明确,这时候就算你对node,npm,webpack,vue-cli还是一脸蒙蔽,你按着流程走下来,也都安装好了!
我们打开我们的study-vue文件夹,看看我们都有了什么。
如果你没有node等的基础,不了解webpack没有关系,我做一个简单的介绍:
index.html就是 我们的静态核心页面,我们完成单页开发,单页指的就是这个页面。
package.json是包文件,里面会配置依赖:
就是我们需要什么框架和工具类库用于我们的项目,除了截图部分,如果你需要jquery,也可以配置进入。
配置的依赖,其实我们本地还没有下载好,我们执行下面命令:
npm install
执行之后,会自动读取package.json,安装配置内容,下载到本地,等待完成:
打开这个文件,你可以看到你配置的各种依赖和相关引用。
记住下面的命令,启动你的项目:
npm run dev
浏览器效果:
很多他的内置工作你不需要了解,你知道找到下面文件修改即可:
<template>
<div id="app">
<h3>{{msg}}</h3>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'helloworld'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
浏览器效果:
四.npm run dev
在index.html我们发现引用了一个没有的文件
但是我们浏览器却看到了效果,而我们的main.js里面才看到使用vue文件了:
我们只要记住,在npm run dev指令启动之后,浏览器打开的页面会自动使用main.js,并且自动引用相关即可(深究多了似乎没有用,你其实是学习vue,而不是学习构建工具的原理)!
这是main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
里面运用了es6的知识,如果你不了解(https://my.oschina.net/tbd/blog/1541903)
我们修改代码以后,浏览器会自动刷新!
五.输出helloworld
我们修改两个文件,一个是main.js:
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"><h3>{{ message }}</h3></div>
<script src="/dist/build.js"></script>
</body>
</html>
我们可以看到,会找到id叫app的位置,然后{{}}里面的会被动解析出dada设置的内容。
我们在data里面多设置一些key和val,然后在html中显示他们,我们就知道如何工作了:
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
<script src="/dist/build.js"></script>
</body>
</html>
效果如下:
六.设置应用范围(挂载)
最简单的就是data里面设置的字段,{{}}包含是可以解析的,这个{{}}是有范围的,如果是一个普通html{{}}肯定不起作用,其实这个应用范围就是在哪个位置内部使用vue的处理,
1.el 设置
vue提供的就是在新建实例设置el属性,这个#app就是找到id叫这个的元素,同样可以是.app类名叫这个的,
import Vue from 'vue'
var app = new Vue({
el: '.app',
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div class="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
<script src="/dist/build.js"></script>
</body>
</html>
也可以document获取一个元素节点,
import Vue from 'vue'
var app = new Vue({
el: document.getElementById("app"),
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
<script src="/dist/build.js"></script>
</body>
</html>
2.vm.$mount()
支持手动挂载:
import Vue from 'vue'
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
})
app.$mount("#app")
这样写一个意思:
import Vue from 'vue'
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
}).$mount("#app")
七.渲染结构
1.普通设置
我们现在的结构渲染是在html的内部:
2.template 设置
import Vue from 'vue'
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
},
template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>"
}).$mount("#app")
我们可以看到挂在位置都会被template的模版内容替换掉:
3.render 使用jsx渲染
render的方法会在回调中获取createElement,
我们的第一个参数使用标签的形式去使用:
import Vue from 'vue'
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
},
template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>",
render:function(createElement){
return createElement("div","<h3>"+this.message+this.d2+this.d3+"</h3>")
}
}).$mount("#app")
当render和template都存在,我们的render会剔掉template的设置:
同样的createElement是支持组件对象的,我们马上学习组件的使用。
八.设置组件
vue最最重要的就是组件的使用,开始就是组件开发,组件有多种模版设置方式,不过都很简单。
我们直接看最简单方式:
// 注册
Vue.component('my-component', {
template: '<div class="zj">123</div>'
})
这样我们就设置好了一个组件,我们使用组件和写div类似:
import Vue from 'vue'
// 注册
Vue.component('my-component', {
template: '<div class="zj">123</div>'
})
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
}
}).$mount("#app")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"><my-component></my-component></div>
<script src="/dist/build.js"></script>
</body>
</html>
这时候我们学会了定义一个组件,也知道了组件对象的形式,我们解决render的问题:
import Vue from 'vue'
// 注册
var App= {
template: '<div id="app">123</div>'
}
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
},
render:function(createElement){
return createElement(App)
}
}).$mount("#app")
我们的createElement使用了组件对象做参数,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
我们再次结合组件去处理,把设置的组件放在里面:
import Vue from 'vue'
var App= {
template: '<div id="app"><my-component></my-component></div>'
}
// 注册
Vue.component('my-component', {
template: '<div class="zj">我是自定义组件</div>'
})
var app = new Vue({
data: {
message: 'Hello Vue!',
d2:"d2",
d3:"d3"
},
render:function(createElement){
return createElement(App)
}
}).$mount("#app")
效果:
我们已经写好了一个App组件对象,这个就是我们render的主结构。
也同样支持render的方式设置组件模版,如果你需要的话。
组件模版定义有大概四种方式:
1.template直接定义
2.script定义和引用
3.render的jsx
4.异步渲染
我们学习当中使用template直接定义即可!
九.总结
我们把main.js做es6的改造:
import Vue from 'vue'
var App= {
template: '<div id="app">helloworld</div>'
}
var app = new Vue({
render:h=>h(App)
}).$mount("#app")
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stydy-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
如果你还记得最开始创建项目的代码:
再看看App.vue文件你或许应该明白在vue文件最后被解析成什么了:
我们修改一下App.vue的代码,如果你还不明白:
<template>
<div id="app">helloworld</div>
</template>
<script>
export default {
name: 'app'
}
</script>
这时候我们就会发现,其实一个vue文件最终被解析好的就是组件对象形式,他利用的就是:
十.其他了解
采用 vue init webpack 构建项目,可在config/index.js配置代理等
首先安装node(百度,系统?64?32?选择安装)
node -v
npm -v
监测是否安装
webpack安装:
npm install -g webpack 全局安装
npm install webpack 项目下安装
Vue脚手架安装:
vue-cli
安装:
npm install -g vue-cli 全局安装
npm install vue-cli 项目下安装
创建项目:
vue init webpack(根据提示设置)
安装依赖
npm install
需要其他依赖
打开package.json
如果需要使用vue-router和vuex
在devDependencies最后加入对应配置:
"vue-router": "^",
"vuex": "^"
如果还需要axios,同理
npm install 执行后等待安装好所有依赖
启动项目:
npm run dev # 一切就绪!
打包合并生成项目:
npm run build 执行命令,等待完成
(合成后直接打开静态页面index.html报错?
可以修改config下index.js配置
assetsSubDirectory的属性
'/static'修改为'static'
后续安装依赖:
没有vue-router?????
执行:
npm install vue-router
还需要vuex?????同理
重要说明:
babel-polyfill模块保证es6的语法在ie9 10得到支持(如es6的生成器等,map类型等)