<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]的更多相关文章

  1. vue-schart ： vue.js 的图表组件

    介绍 vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件.支持vue.js 1.x & 2.x 仓库地址:https://github.com/lin-xin/ ...

  2. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  3. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  4. Vue.js项目模板搭建

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...

  5. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  6. oc 与 js交互之vue.js

    - .vue.js 调用oc的方法并传值 vue.js 组件中调用方法: methods: {     gotoDetail(item){         //此方法需要在移动端实现,这里可以加入判断 ...

  7. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  8. 在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板

    网上Vue模板不是最新的,我自己做了一个最新的支持 Vue.js 的最小工程模板,方便大家从 Hello world. 入门, 在 VS2017 里学习,并扩展出自己的项目. 下面是创建步骤: 1.在 ...

  9. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

随机推荐

  1. FJUT3568 中二病也要敲代码（线段树维护区间连续最值）题解

    题意:有一个环,有1~N编号,m次操作,将a位置的值改为b,问你这个环当前最小连续和多少(不能全取也不能不取) 思路:用线段树维护一个区间最值连续和.我们设出两个变量Lmin,Rmin,Mmin表示区 ...

  2. 【做题】arc080_f-Prime Flip——转换、数论及匹配

    题意:有一个无限序列,其中有\(n\)个位置上的数为\(1\),其余都是\(0\).你可以进行若干次操作,每次选取序列上的一个区间\([l,r)\),满足\(r-l\)为奇质数,将在这个区间上的数都异 ...

  3. [转] Java 基础

    1. 面向对象和面向过程的区别 面向过程 面向对象 2. Java 语言有哪些特点 3. 关于 JVM JDK 和 JRE 最详细通俗的解答 JVM JDK 和 JRE 4. Oracle JDK 和 ...

  4. CF776B Sherlock and his girlfriend

    题目地址 题目链接 题解 这题很有意思啊qwq.本来是写算出每个数的质约数的,然后写到一半发现,质约数互相不影响,有质约数的数肯定是合数. 所以合数染一种色,质数染一种色就好 #include < ...

  5. 集合00_Java集合框架

    集合类概述 1.继承树 2.集合和数组 区别如下: 数组可以存储基本数据类型,也可以存储引用类型:而集合只能存储引用类型(比如存储int,它会自动装箱成Integer) 数组长度固定,集合长度可变 3 ...

  6. C# DateTime判断时间

    两种情况: 1 DateTime? dtTemp = null; if(dtTime != null) { //wawawa } 刚刚学会的,可空值类型,可判断是否赋值 2 DateTime dtTe ...

  7. 深度学习课程笔记（十一）初探 Capsule Network

    深度学习课程笔记(十一)初探 Capsule Network  2018-02-01  15:58:52 一.先列出几个不错的 reference: 1. https://medium.com/ai% ...

  8. ie 支持字体大小继承

    今天需要实现字体大小继承这个效果.是这样的,在公用类里 .box 中的 .box1 的字体进行了修改.但是我的页面里不需要修改.我需要让他和 .box 一样.所以想到使用继承.但是想到继承这个属性兼容 ...

  9. JS基础---常见的Bom对象

    BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分.它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM. 一张图了解一下先 1.wi ...

  10. DjangoBlog安装

    DjangoBlog安装 下载 https://github.com/liangliangyy/DjangoBlog/archive/v7.0.tar.gz pip install -Ur requi ...