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各种实例集合的更多相关文章
- Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue2.5笔记：Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue的实例
vue的实例 创建一个vue实例的写法和创建一个变量一样 var vm = new Vue{{ //我们一般用vm来接收vue的实例,vm是 ViewModel的缩写 }} 然后,我们就可以给vue实 ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
随机推荐
- 微信即将支持App直接打开小程序
“今年,微信将更快速地支持各APP直接打开小程序.”微信开放平台基础部高级产品经理林兴表示.对于官方即将支持的App直接打开小程序,林兴解释说,正如大家都喜欢微信钱包里的各种便捷服务,以后一个旅游攻略 ...
- zha男/女的三种境界
本文为chedan贴,谈一谈找对象时渣男/女的三种表现,分别对应三种境界,涉世未深的男生女生可加以小心,自身属于zha类型的可略过本文. 另,本文的恋爱观基于两个原则.一是对象应是从朋友到恋人的 ...
- windows xp 不支持Wap2加密方式
故障:错误提示“Windows无法连接到选定网络,网络可能不在区域中.请刷新可用网络的列表,重新尝试.” 原因:windows xp并不直接支持Wap2加密方式的~估计是windows xp比较老了吧 ...
- testetest
resumeLoad renren静态 foolday \ swImg activity01
- EOS 开发终极神器－vscode (你绝对找不到的干货)
https://eosfans.io/topics/323 前言:最近一直苦于EOS开发没有好用的IDE,用了很多,试了很多,都让人觉得有些差强人意.于是乎笔者在经过,长时间的查找实践中,终于找到了e ...
- DLNg序列模型第二周NLP与词嵌入
1.使用词嵌入 给了一个命名实体识别的例子,如果两句分别是“orange farmer”和“apple farmer”,由于两种都是比较常见的,那么可以判断主语为人名. 但是如果是榴莲种植员可能就无法 ...
- Sql注入基础原理介绍
说明:文章所有内容均截选自实验楼教程[Sql注入基础原理介绍]~ 实验原理 Sql 注入攻击是通过将恶意的 Sql 查询或添加语句插入到应用的输入参数中,再在后台 Sql 服务器上解析执行进行的攻击, ...
- $router.query和$router.params的区别
类型于get(query) 和 post(params) 1.query方式传参和接收参数 传参: this.$router.push({ path:"/xxx" query: ...
- [LeetCode] 613. Shortest Distance in a Line_Easy tag: SQL
Table point holds the x coordinate of some points on x-axis in a plane, which are all integers. Writ ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785