Vue.js基础知识
<!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>02_模板语法</title>
</head>
<body>
<!--
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
-->
<!--
1. 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
2. 双大括号表达式
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法
3. 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4. 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
--> <div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p> <h2>2. 指令一: 强制数据绑定</h2>
<img v-bind:src="data:imageUrl"/>
<img src="data:imageUrl"/>
<img :src="data:imageUrl"/> <h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="fn">fn</button>
<button @click="fn01('fn01')">fn01</button> </div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "<h1>hello world</h1>",
imageUrl: "http://i1.umei.cc/uploads/tu/201809/9999/rn5a77833592.jpg"
},
methods: {
fn(){
alert("hello fn");
},
fn01(n){
alert(n)
}
}
})
</script>
</body>
</html>
Vue.js基础知识的更多相关文章
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- 简单易懂的 Vue.js 基础知识 ！
根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold <!-- 这是我们的 View - ...
- Vue.js 基础知识
0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...
随机推荐
- 三十分钟理解：双调排序Bitonic Sort，适合并行计算的排序算法
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入 双调排序是data-indepen ...
- MDI窗体及涉及到的相关问题
MDI窗体是个什么东东尼?多文档窗体唠,相对的还有个SDI,就是单文档窗体.一般情况下我们会将软件的主窗体设置为MDI窗体.那么在主窗体的菜单部分调出来的其他窗体就是主窗体的子窗体了. (1)在主窗体 ...
- 日志异常：java.lang.NoClassDefFoundError: Could not initialize class org.slf4j.impl.StaticLoggerBinder
今天启动开发的项目,碰到了一个日志上的bug:java.lang.NoClassDefFoundError: Could not initialize class org.slf4j.impl.Sta ...
- 在Linux中批量修改字符串的命令
昨天一个朋友忽然问我,在Linux下如何批量修改字符串,当时瞬间懵逼了,完全想不起来....... 今天特意的重温了一下Linux下的一些常用命令,并将这个遗忘的批量修改字符串的命令记录下来(资料来自 ...
- 浅谈闭包（Closure）
一.闭包 好长时间对于闭包都知道与函数和其环境变量有关系,但是一直没有一个清晰的认识.今天查看了一下维基百科,顺便写下来. 二.闭包的定义 在编程语言中,闭包(语义闭包或函数闭包)是指哪些可以将语义范 ...
- test20181024 zi
题意 分析 这种题一般是推公式,发现必须求得的量,然后定义函数记忆化. 然后那些函数里面又是递归处理,合并. 代码 为了不爆空间,用map存记忆化内容. #include<bits/stdc++ ...
- 随笔——python截取http请求报文响应头
随笔——python截取http请求报文响应头 标签: pythonhttp响应头 2014-05-29 09:32 2114人阅读 评论(0) 收藏 举报 分类: 随笔(7) 版权声明:本文为博 ...
- Form中的keypress事件不能用
Form中的keypress事件不能用 编写人:CC阿爸 2015-4-8 近期在修改系统时,想给一画面增加一个组合键功能,但在form_keypress事件中加入代码,但无论如何也不能触发该动作. ...
- 32位汇编基础_cpu 寄存器
32位通用寄存器 EAX EBX ECX EDX EBP ESP ESI EDI 八个寄存器都可以作为普通的数据寄存器使用.但有的有特殊的用途: EAX 为累加器, ECX 为计数器, E ...
- 十一、jdk命令之Jstatd命令(Java Statistics Monitoring Daemon)远程的监控工具连接到本地的JVM执行命令
目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...