模板语法:

<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. java 读取文件流

    搬运自速学堂:https://www.sxt.cn/Java_jQuery_in_action/ten-iqtechnology.html JAVA中IO流体系: 四大IO抽象类 ·InputStre ...

  2. 一、openfeign的自动配置

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 openfeign是一种声明式的webservice客户端调用框架.你只需要声明接口和一 ...

  3. vue基础部分

    一 vue概念 是一个构建用户界面的javascript框架 二 如何使用vue 1. 导入vue.js文件 2. 展示HTML 3. 建立vue对象,写JavaScript代码 vue的简单实用:申 ...

  4. Django-cms show_menu参数解释

    当页面结构设置(/admin/cms/page)如下: - Home (level=0) - About Us (level=1) - About Company Services (level=2) ...

  5. vue进入页面时不在顶部,检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  6. 浅谈javascript中变量作用域和内存(2)

    1.无块级作用域 javascript没有块级作用域,这会让其他程序员在理解js代码上很痛苦.在其他很多语言,比如C,大括号括起来的代码块都有自己的作用域 举个例子 if(true) { var na ...

  7. sql server存储过程解密

    解密存储过程: USE [RYTreasureDB] GO /****** Object: StoredProcedure [dbo].[sp__windbi$decrypt] Script Date ...

  8. flask-sqlalchemy使用及数据迁移

    flask-sqlalchemy是flask框架在sqlalchemy基础上改造的一个orm框架 现在有两个实体Article文章和Category分类 一个分类下可能有多篇文章 相关示例: 项目相关 ...

  9. 【转载】解密ThreadLocal

    概述 相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资 ...

  10. CIP 协议安全扫盲