First, the build environment
1. Install NodeJS ((https://nodejs.org/en/)
2. mounted scaffolding npm install --global vue-cli / cnmp install --global vue-cli cnpm npm may be mounted with the mirror Taobao install HTTPS CNPM --registry = -g: //registry.npm.taobao.org
3.
(. 1) to create a complex project, have a directory cd corresponding to
VUE VUE WebPACK the init-demo01
cd VUE-demo01
NPM RUN dev
( 2) simple (recommended)
VUE WebPACK the init-VUE-demo02 the simple
cd VUE-demo02
CNPM install
CNPM RUN dev
We open the project with vs code, vs code installation vue extension (Vue 2 Snippets)
Two, vue data binding, binding properties, binding events
App.vue file contents
<Template>
<-! only one id, all pages are written in the inside div ->
<div the above mentioned id = "App">
<-! Binding Data ->
AA {{msg}} <br / >
{} {} obj.name
a
<UL>
<-V for Li = "(Item, index) in List": class = "{ 'Red': index == 0, 'Blue': index = . 1} = "> Item {{}} - {{}} index </ Li>
</ UL>
<UL>
<-V for Li =" Item in List1 "> item.name, for {{}} - { item.age}} {</ Li>
</ UL>
<! - binding properties, v-bind can be omitted ->
<div the bind-V: title = "title"> mouse put up </ div>
<div: title = "title"> mouse put up </ div >
<! - Binding HTML ->
<div v-HTML = "HTML"> </ div>
<input type="text" v-model="msg" />
<input type="button" value="单击" v-on:click="myclick"/>
<input type="button" value="单击" @click="myclick"/>
</div>
</template>
<script>
// 业务逻辑，返回数据
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
title:"title",
html:"<span style='color:red;'>aa</span>",
obj:{
name:"张三"
},
list:['11',"22"],
list1:[
{"name":"aa","age":11},{"name":"bb","age":22}
]
}
},
methods:{
myclick:function(){
alert("click");
}
}
}
</script>
<style>
</style>
Third, the life cycle of the modular functions and introducing
a new model folder, and then creates a file product.js
product.js
var = {Product
getProducts(){
return [{id:1,name:"aa"},{id:2,name:"bb"},]
},
saveProduct(){
}
}
export default product;
Then you can use the object product.js in the App.vue inside
App.vue
<Template>
<-! Only one id, all pages are written in the inside div ->
<div the above mentioned id = "App">
{{msg}}
</div>
</template>
<script>
// Import modular file
import product from './model/product.js'
// business logic, data is returned
Export default {
name: 'App',
Data () {
return {
MSG: 'Your Vue.js available for purchase to the App'
}
},
Methods: {
MyClick: function () {
Alert ( "the Click" );
}
}
// function vue page life cycle refresh method will be triggered
Mounted () {
this.msg = "11";
console.log(product.getProducts())
},
}
</script>
<style>
</style>
Four, vue component
is a variety of component reuse, partial view similar to
New Folder components, new Home.vue
Home.vue
<Template>
<-! only one id, all pages are written in the inside div ->
<div the above mentioned id = "App">
<h1> {{msg}}} </ h1>
</ div>
</ template>
<script>
// business logic, data is returned
Export default {
name: 'App',
Data () {
return {
MSG: 'Your Vue.js available for purchase to the App'
}
},
Methods: {
MyClick: function () {
Alert ( "the Click" );
}
}
}
</script>
<! - local scope, is only valid for the current page ->
<style scoped>
h1 of {
Color: Red;
}
</style>
App.vue then used in the <Home-V> </ V-Home>
Import from Home './components/Home.vue';
Components: {
'v-home':Home
}
App.vue
<Template>
<-! Only one id, all pages are written in the inside div ->
<div the above mentioned id = "App">
{{msg}}
<v-home></v-home>
</div>
</template>
<script>
Modular // Import File
import product from './model/product.js';
import Home from './components/Home.vue';
// business logic, data is returned
Export default {
name: 'App',
Data () {
return {
MSG: 'Your Vue.js available for purchase to the App'
}
},
Methods: {
MyClick: function () {
Alert ( "the Click" );
}
}
// function vue page life cycle refresh method will be triggered
Mounted () {
this.msg = "11";
console.log(product.getProducts())
},
components:{
'v-home':Home
}
}
</script>
<style>
</style>
Five life-cycle function
has two main mounted () {} request data, dom when operational use
beforeDestroy () {} pages before triggering the destruction, you can save some data prior to destruction
Sixth, request data (see the help document from github)
use of a plug-vue vue-resource provided by the official (now no longer updated, do not use the recommended)
1. Under the project directory install vue-resource --save CNPM
2. main.js write VueResource from Import "VUE-Resource"; Vue.use (VueResource);
. 3. The method of calling this $ http.get ( 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid Page 20 is & =. 1 = ') the then (Response => {.
// Data GET body
the console.log (response.body);
}, Response => {
// the callback error
});
using Axios
CNPM the install Axios --save
in to use call page from Axios Import 'Axios';
axios.get ( 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1', {})
.then (function (Response) {
the console.log (response.data.result);
})
.catch(function (error) {
the console.log (error);
});
If the cross-domain requests using fetch-jsonp
Seven sub-page data transmitted parent page
1. parent page: <v-header: parenttitle = "title": parentMethod = "parent": home = "this"> </ v-header>
can pass a string can be passed Method objects and their own
2 sub-pages are received props: [ "parenttitle", " parentMethod", "home"], call
Home.vue
<Template>
<- only one id, all pages are written in the div inside -! ->
<div ID = "App">
<header-V: parenttitle = "title": parentMethod = "parent": Home = "the this"> </ V-header>
</ div>
</ Template>
<script>
import Header from './Header.vue';
// business logic, data is returned
Export default {
name: 'App',
Data () {
return {
title: "I value pass over the parent page",
}
},
Methods: {
parent: function (Arg) {
Console. log ( "I'm a method of the parent page of" + Arg);
}
},
components:{
'v-header':Header,
}
}
</script>
<! - local scope, is only valid for the current page ->
<style scoped>
h1 of {
Color: Red;
}
</style>
Header.vue
<Template>
<-! Only one id, all pages are written in the inside div ->
<div the above mentioned id = "App">
<h1> {{msg}} </ h1>
<h1> { {parenttitle}} </ h1 of>
<Button @ the Click = "parentMethod ( 'header')"> call parent page methods </ button>
<Button @ the Click = "getParent ()"> to get the parent page object </ button>
</ div>
</ Template>
<script>
// business logic, data is returned
Export default {
name: 'App',
Data () {
return {
MSG: 'I Header'
}
},
Methods: {
getParent: function () {
the console.log (this.home.title );
}
},
The props: [ "parenttitle", "parentMethod", "Home"]
}
</script>
<! - local scope, is only valid for the current page ->
<style scoped>
h1 of {
Color: Red;
}
</style>
Eight, the parent page calls subpages methods and subpages call parent page process
method parent page calls a sub-page attribute
parent page <V-header REF = "header"> </ V-header>
getChild: function () {
Console. log (the this $ refs.header.msg.);
the this $ refs.header.headerMethod ();.
}
subpage
Data () {
return {
MSG: 'I Header'
}
},
headerMethod: function () {
Console. log ( "I am a header method");
}
sub-page call to the parent page property method
to call this sub page $ parent.parentMethod ().;
Nine, the use of non-state management vuex his son pass component value
vuex is a state management model specially developed for vue.js application (using the large-scale projects, small projects using localStorage, sessionStorage)
1.vuex resolved between the different components the data sharing
2. the assembly of persistent data inside
vuex using
1.src vuex a new directory folder
2.vuex a new folder which store.js
3. installation vuex
CNPM the install vuex --save
4. in store.js introduced just created vue, introduced vuex, and vuex use
Import from Vue 'VUE'
Import from vuex 'vuex'
Vue.use (vuex)
5. the definition data
// the service definition data
var State = {
COUNT:. 1
}
6. the method defined, mutations which put the method, which method is mainly used to change the state data
var mutations = {
incCount () {
++ state.count;
}
}
exposed
const = Store new new Vuex.Store ({
state,
mutations
})
export default store;
In which the component vuex:
1. introducing Store
Import from Store '../vuex/store.js';
2. Register
Export default {
Data () {
return {
MSG: "AA"
}
},
Store,
Methods: {
incCount () {
. store.commit the this $ ( 'incCount'); // trigger data state inside
}
}
}
3. Get state data inside
this. $ Store.state. Data (the this. $ Store.state.count)
4. Trigger mutations which change the state of the data
this. $ Store.commit ( 'incCount' )
X.-Router route VUE
1. The mounting assembly
CNPM the install VUE-Router --save
main.js write
Import VueRouter from "VUE-Router";
Vue.use (VueRouter);
// Create an assembly
Import from Home './components/Home.vue';
Import from News './components/News.vue';
// 2 routing configuration.
Const routes = [
{path: '/ Home', Component: Home},
{path: '/ News', Component: News},
{path: '*', the redirect: '/ Home'} // default page by Home
]
// instantiate. 3 routing.
const = new new Router VueRouter ({
routes // (abbreviation) corresponds routes: routes
})
. Mounting route. 4 //
new view ({
el: '#app',
router, router使用//
render: h => h (app)
})
//5.App.vue into
<! - using the router-link assembly to navigate ->
<! - Specifies the link by passing `to` Properties ->
<! - <router-link> the default will be rendered as a `<a>` tag ->
<-Link Router to = "/ Home"> Home </ Router-Link>
<-Link Router to = "/ News"> news pages </ router- Link>
<HR />
<Router-View> </ Router-View>
eleven, vue dynamic routing and transmission values get
dynamic routing
1.main.js dynamic routing
import Content from './components/Content.vue';
routes = const [
{path: '/ Content /: ID', Component: the Content}
]
2. Skip <router-link: to = " '/ content /' + id"> News Information Content </ router-link>
3. Content page acquisition request parameter
Mounted () {
the console.log ($ route.params the this.);
}
GET pass value
1.main.js dynamic routing
Import from the Content './components/Content.vue';
const routes = [
{path: '/ Content', Component: the Content}
]
2. Skip <router-link to = "/ ? content id = 111 "> News Information Content </ Router-Link>
3. Content page acquisition request parameters
Mounted () {
the console.log ($ route.query the this.);
}
Twelve, vue navigation route programming mode and hash mode history
js trigger jump page
1.this $ router.push ({path: "News"});.
2.this $ router.push ({path:. "/ Content / 222 "});
3. route can be defined Jump name {path:" / news ", component: News, name:" news "} router.push ({name:" news ", params: {userId: 123 }});
Access address is a hash # mode # remove history mode is provided in routing main.js
const = new new Router VueRouter ({
MODE: "history",
routes // (abbreviation) corresponds routes: routes
})
XIII Vue routing of nested
1. Configure Route
main.js
Import from the User './components/User.vue';
Import from useradd './components/User/UserAdd.vue';
Import from the UserList './ components / User / UserList.vue ';
{
Path: '/ User',
Component: the User,
Children: [
{path: "the useradd", Component: useradd},
{path: "UserList", Component: the UserList}
]
}
2. parent routing configuration inside the sub-route is displayed local
<div>
<Router-Link to = "/ User / the useradd"> the useradd </ Router-Link>
<Router-Link to = "/ User / UserList"> UserList </ Router-Link>
</ div>
<br />
<div>
<Router-View> </ Router-View>
</ div>
</ div>
fourteen, vue of ui framework
hungry Mody company based vue developed vue ui component library
Element ui-based vue pc end of ui frame
Mint Ui ui moving end frame based vue
Element Ui Use
installation: cnpm i element-ui -S
main.js in
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use (components);
webpack.config.js 中
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
You can use the
<EL-Row>
<EL-the Button> Default button </ EL-the Button>
<EL-the Button of the type = "Primary"> main button </ EL-the Button>
<EL-the Button of the type = "Success"> Success button </ EL-button>
<EL-button type = "info"> information button </ EL-button>
<EL-button type = "warning"> warning button </ EL-button>
<EL-button type = " danger "> risk button </ EL-button>
</ EL-Row>
XV routing modular
new folder Router, New router.js
Import from Vue 'VUE'
Import VueRouter from" VUE-Router ";
Vue. use (VueRouter);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import Content from '../components/Content.vue';
import User from '../components/User.vue';
import UserAdd from '../components/User/UserAdd.vue';
import UserList from '../components/User/UserList.vue';
//2.配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:id', component: Content },
{ path: '/content', component: Content },
{
path:'/user',
component:User,
children:[
{path:"useradd",component:UserAdd},
{path:"userlist",component:UserList}
]
},
{Path: '*', Component:} // Default Home Page use Home
]
// instantiate. 3 routing.
Const = new new Router VueRouter ({
MODE: "History",
routes // (abbreviation) corresponds routes: routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from "vue-resource";
Vue.use(VueResource);
import router from './router/router.js'
// 4. Mounting route
new view ({
el: '#app',
router,
render: h => h (app)
})