模板语法:

<div id="app">
<p>{{ message }}</p>
</div>

html

使用 v-html 指令用于输出 html 代码

v-html
<div id="app">
<div v-html="message"></div>
</div> <script>
new Vue({
el: '#app',
data: {
message: '<h1>dashu</h1>'
}
</script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div> <script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
{{ message.split('').reverse().join('') }}
<div id="app">
<pre><a v-bind:href="url"></a></pre>
</div> <script>
new Vue({
el: '#app',
data: {
url: ''
}
})
</script>

v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit"></form>

实现双向数据绑定:

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div> <script>
new Vue({
el: '#app',
data: {
message: 'dashu!'
}
})
</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定

v-on 监听事件

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div> <script>
new Vue({
el: '#app',
data: {
message: 'dashu'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

过滤器:

字符串第一个字母转为大写:
<div id="app">
{{ message | capitalize }}
</div> <script>
new Vue({
el: '#app',
data: {
message: 'dashu'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(4)打鸡儿教你Vue.js的更多相关文章

  1. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  4. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  5. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

  10. (12)打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. (转)DMA(Direct Memory Access)

    DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...

  2. [Luogu5320][BJOI2019]堪破神机(DP+斯特林数)

    https://www.cnblogs.com/cjyyb/p/10747543.html 特征方程+斯特林反演化简式子,要注意在模998244353意义下5没有二次剩余,所以每个数都要用$a+b\s ...

  3. poj 3252 数位dp

    题意:一个二进制的数,如果0的个数大于1的个数,那么我们称这个数为Round Numbers,求给定区间(十进制表示)中Round Numbers的个数 题解:数位dp,不过这里枚举的时候lead标记 ...

  4. 在论坛中出现的比较难的sql问题:31(row_number函数+子查询 月环比计算)

    原文:在论坛中出现的比较难的sql问题:31(row_number函数+子查询 月环比计算) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.

  5. TextBox 显示横线

    public class Xtxt3 : TextBox { private bool m_underLine; public bool UnderLine { get { return m_unde ...

  6. for_each使用方法详解

    for_each使用方法详解[转]   Abstract之前在(原創) 如何使用for_each() algorithm? (C/C++) (STL)曾經討論過for_each(),不過當時功力尚淺, ...

  7. h5 点击ios键盘完成 出现键盘大小的白块

    document.addEventListener('focusout', function (e) { window.scrollTo() }) 源文件链接 https://blog.csdn.ne ...

  8. jar找不到问题解决

    1.File->Settings->搜maven->看Local repository的路径配置是否正确,再看User settings file路径配置是否正确,再看xml内容配置 ...

  9. 【JUC】1.线程

    先复习一下线程的东西: Java线程的内存模型 主内存与工作内存 Java内存模型主要定义了程序中各个变量的访问规则 所有的变量都在主内存,Java堆(线程共享) 每条线程都有自己的工作内存,虚拟机栈 ...

  10. 四:MySQL系列之Python交互(四)

    该篇主要介绍MySQL数据库的分表.以及与Python的交互的基本操作等. 一.拆分表操作 1.1  准备工作 创建数据库 --> 使用数据库 --> 创建数据表 --- 添加记录 -- ...