vue各种实例集合
注意：以下所有示例基于vue 2.x、Vuex 2.x、
vm.$mount()-挂载：
<body> <div id="a">
</div>
</body>
<script>
var A = Vue.extend({
template: \'<p>123</p>\'
});
/*// 自动挂载
new A({
el: \'#a\'
});*/
var a = new A();
a.$mount(\'#a\')// 手动挂载
</script>
局部注册：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<com-b></com-b>
<com-c></com-c>
<com-d></com-d>
</div>
<template id="com-d">
<div>comD</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var comC = Vue.component(\'comC\', {
template: \'<div>comC</div>\'
});
var vm = new Vue({
el: \'#app\',
components: {
comB: {
template: \'<div>comB</div>\'
},
comC: comC,
comD: {
template: "#com-d"
}
}
});
</script>
</body>
</html>
动态组件：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<component :is="cur"></component>
<button @click="change">change</button>
</div>
<template id="comA">
<div>comA</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm = new Vue({
el: \'#app\',
data: {
cur: {
template: \'<div>cur</div>\'
}
},
methods: {
change: function(){
this.cur = this.cur == \'comA\' ? \'comB\' : \'comA\'
}
},
components: {
comA: {
template: \'#comA\'
},
comB: {
template: \'<div>comB</div>\'
}
}
})
</script>
</body>
</html>
计算示例(computed)：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{intro}}
<input v-model="name"/>
<input v-model="age"/>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm = new Vue({
el: \'#app\',
data: {
name: \'Samve\',
age: 32
},
computed: {
intro: function(){
return \'name：\' + this.name + ", age: " + this.age;
}
}
});
</script>
</body>
</html>
自定义指令：实现"点击按钮使文本框获取焦点"示例(directive)
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-focus="isFocus"/>
<button @click="change">change</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
Vue.directive(\'focus\', {
inserted: function(el, binding){
if(binding.value){
el.focus();
}else{
el.blur();
}
},
componentUpdated: function(el, binding){
if(binding.value){
el.focus();
}else{
el.blur();
}
}
});
let vm = new Vue({
el: \'#app\',
data: {
isFocus: true
},
methods: {
change(){
this.isFocus = !this.isFocus;
}
}
});
</script>
</body>
</html>
使用jquery调用接口数据：
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{list}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
let vm = new Vue({
el: \'#app\',
data: {
list: \'\'
},
created: function(){
let that = this;
$.ajax({
url: \'http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json\',
dataType: \'jsonp\',
success: function(data){
that.list = data.webConfig.helloWord;
}
})
}
})
</script>
</body>
</html>
slot示例：
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<com-a>
<p>中国科学院</p>
<p>院士</p>
<p slot="slotA">杨院士</p>
<com-b></com-b>
</com-a>
</div>
<template id="comA">
<div>
<slot></slot>
<slot></slot>
<slot name="slotA"></slot>
<P>comA</P>
</div>
</template>
<template id="comB">
<div>comB</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
Vue.component(\'comA\', {
template: \'#comA\'
});
Vue.component(\'comB\', {
template: \'#comB\'
});
let vm = new Vue({
el: \'#app\'
});
</script>
</body>
</html>
vuex示例：
a. 简单计数
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div><button @click="add">add</button></div>
<div><button @click="reduce">reduce</button></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script>
Vue.use(Vuex);
let myStore = new Vuex.Store({
state: {
num: 0
},
mutations: {
add: function(state){
state.num++;
},
reduce: function(state){
state.num--;
}
}
});
let vm = new Vue({
el: \'#app\',
store: myStore,
computed: {
num: function(){
return myStore.state.num;
}
},
methods: {
add(){
myStore.commit(\'add\');
},
reduce(){
myStore.commit(\'reduce\');
}
}
})
</script>
</body>
</html>
b. 子组件获取Vuex状态：
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<com-a></com-a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script>
Vue.use(Vuex);
let myStore = new Vuex.Store({
state: {
num: 0
}
});
let vm = new Vue({
el: \'#app\',
store: myStore,// 把store实例注入所有的子组件
computed: {
num(){
return this.$store.state.num;// 使用this.$store即可引用s
}
},
components: {
comA: {
template: `<div>子: {{num}}</div>`,
computed: {
num(){
return this.$store.state.num;// 使用this.$store即可引用
}
}
}
}
})
</script>
</body>
</html>
参考：https://blog.csdn.net/u011500781/article/details/52475967
以上是 vue各种实例集合 的全部内容， 来源链接： utcz.com/z/376928.html
