Vue.js总结 [2017.6.5]
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
//所有 v- 都为指令，表示它们是Vue的特殊属性
<span v-bind:title="xxx"></span> v-bind 【控制属性】
<span :class="{red：isRed}"></span> 简写 【判断class是否为isRed】
<span :class="[classA,classB]"></span> 【数组，两个class,可赋值】
<span :class="[classA,{classB：isB，classC：isC}]"></span> 【数组，第一个为字符串可赋值，第二个判断class是否展现不可赋值】
<span v-if="seen"></span> v-if 条件与循环【如果seen为true则显示】
<span v-show="seen"></span> 【如果seen为true则显示】
<span v-for="todo in todos">{{todo.text}}</span> v-for【绑定数组的数据来渲染一个项目列表】
<span v-on:click="reverseMessage"></span> v-on【绑定一个事件监听器】[在methods使用]
<span @click="reverseMessage"></span> [在methods使用]
//渲染数据
<p v-text="a"></p>
<p v-html="a"></p>
{{}}
</body>
<script>
var vm = new Vue(){} //创建Vue
//v-bind:tltle="message"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
message：'页面加载中'
}
}
//v-if="seen"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
seen:true
}
}
//v-for="todo in todos"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
todos:[
{text:"HTML"},
{text:"css"},
{text:"java"}
]
}
}
vm.todos.push({text:'新项目'}）
//v-on:click="reverseMessage"
//vue.js组件的重要选项
data vue对象里用到的所有数据 model
methods用于页面绑定的方法
watch数据监听，数据改变时可用
components:{}注册组件
item 数组
//如果想控制class的显示隐藏的话 <div id="app">
<li v-bind:class="｛show:item.isFinished｝">
{{item.label}}
</li>
</div> <script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:false
},
{
label:'walking',
isFinished:true
}
]
}
}
})
</script>
//如果想添加多个class，并给其赋值 <div id="app">
<li v-bind:class="[class1,class2]">
{{item.label}}
</li>
</div> <script>
var i = new Vue({
el:'#app',
data:function(){
return{
class1:'nihao',
class2:"lalala"
}
}
})
</script>
//如果想添加一个class <div id="app">
<li v-bind:class="[class12]">
{{item.label}}
</li>
</div> <script>
var i = new Vue({
el:'#app',
data:function(){
return{
class12:'nihao'
}
}
})
</script>
//class的切换
<div id="app">
<ul class="ul">
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li> </ul>
</div> <script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:false
},
{
label:'walking',
isFinished:true
}
]
}
},
methods:{
toggleFinish:function(item){
item.isFinished = !item.isFinished
}
}
})
</script>
//input select ,textarea 输入字符将其与其他标签绑定
<body>
<div id="app">
<input v-model='newModel' v-on:keyup.enter='addNew'/>
</div>
</body>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
newModel:''
}
},
methods:{
addNew:function(){
console.log(this.newModel)
this.newModel=''
}
} })
</script>
//在input中输入字符添加到li中
<body>
<div id="app">
<input v-model='newItem' v-on:keyup.enter="addNew" />
<ul class="ul">
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li> </ul>
</div> </body>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:true
},
{
label:'walking',
isFinished:true
}
],
newItem:''
}
},
methods:{
addNew:function(){
this.items.push({
label:this.newItem,
isFinished:false
})
this.newItem = ''
}
} })
</script>
自定义事件
vue实例实现了一个自定义事件接口，用于在组件树中通信，在这个事件系统独立于原生Dom事件，用法也不同。
每个Vue实例都是一个事件触发器：
1.使用$on()监听事件；
2.使用$emit()在它上面触发事件
3.使用$dispatch（）派发事件，事件沿着父链冒泡；
4.使用$boradcast（）广播事件，事件向下传导给所有的后代
</script>
Vue.js总结 [2017.6.5]的更多相关文章
- vue-schart ： vue.js 的图表组件
介绍 vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件.支持vue.js 1.x & 2.x 仓库地址:https://github.com/lin-xin/ ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js项目模板搭建
前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...
- Angular和Vue.js 深度对比
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...
- oc 与 js交互之vue.js
- .vue.js 调用oc的方法并传值 vue.js 组件中调用方法: methods: { gotoDetail(item){ //此方法需要在移动端实现,这里可以加入判断 ...
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板
网上Vue模板不是最新的,我自己做了一个最新的支持 Vue.js 的最小工程模板,方便大家从 Hello world. 入门, 在 VS2017 里学习,并扩展出自己的项目. 下面是创建步骤: 1.在 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
随机推荐
- error和exception有什么区别?
Error(错误)表示系统级的错误和程序不必处理的异常,是java运行环境中的内部错误或者硬件问题.比如:内存资源不足等.对于这种错误,程序基本无能为力,除了退出运行外别无选择,它是由Java虚拟机抛 ...
- cf213E 线段树维护hash
链接 https://codeforces.com/contest/213/problem/E 题目大意 给出两个排列a.b,长度分别为n.m,你需要计算有多少个x,使 得\(a_1 + x; a_2 ...
- POJ-1038 Bugs Integrated, Inc. （状压+滚动数组+深搜 的动态规划）
本题的题眼很明显,N (1 <= N <= 150), M (1 <= M <= 10),摆明了是想让你用状态压缩dp. 整个思路如下:由于要填2*3或者3*2的芯片,那么就要 ...
- 【做题】arc070_f-HonestOrUnkind——交互+巧妙思维
做的第一道交互题-- 首先,有解的一个必要条件是\(a>b\).否则,即当\(a<=b\)时,可以有\(a\)个unkind的人假装自己就是那\(a\)个honest的人.(彼此之间都说是 ...
- volatile 变量使用
1,对其它线程可见性.原理是:别的线程每次使用前都是要刷新一下值,并不是原子性同步.所有还是会出现线程不安全. 2,禁止指令重新排序.也就是会出现机器实际执行可能和代码的顺序不一样.使用volatil ...
- （转）Awesome PyTorch List
Awesome-Pytorch-list 2018-08-10 09:25:16 This blog is copied from: https://github.com/Epsilon-Lee/Aw ...
- GCN code parsing
GCN code parsing 2018-07-18 20:39:11 utils.py --- load data def load_data(path="../data/cora/ ...
- (zhuan) Paper Collection of Multi-Agent Reinforcement Learning (MARL)
this blog from: https://github.com/LantaoYu/MARL-Papers Paper Collection of Multi-Agent Reinforcemen ...
- 谷歌大规模机器学习：模型训练、特征工程和算法选择 (32PPT下载)
本文转自:http://mp.weixin.qq.com/s/Xe3g2OSkE3BpIC2wdt5J-A 谷歌大规模机器学习:模型训练.特征工程和算法选择 (32PPT下载) 2017-01-26 ...
- MySQL的启动和关闭
1.Windows下 启动服务 mysqld --console 或 net start mysql 关闭服务 mysqladmin -uroot shudown 或 net stop mysql 2 ...