vue--模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>safda</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body >
<!--双向绑定-通过v-model实现-->
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<!--构造器内容-->
<div id="vue_dat">
<h1>name:{{name}}</h1>
<h1>address:{{address}}</h1>
<h1>{{dowhat()}}</h1>
</div>
<!--模板语法-->
<!--插值-->
<!--文本-->
<div id="html">
<div v-html="html"></div>
</div>
<!--属性-->
<div id="vbindclass">
<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>
<!--表达式-->
<div id="expression">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
<!--指令-->
<div id="instruct">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
</div>
</body>
<!--模板语法-->
<!--插值-->
<!--指令是带有 v- 前缀的特殊属性指令用于在表达式的值改变时,将某些行为应用到 DOM 上-->
<script>
new Vue({
el: '#instruct',
data: {
seen: false,
ok: true
}
})
</script>
<!--表达式 给id赋值为list-1-->
<script>
new Vue({
el: '#expression',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
<!--属性使用 v-bind:class 指令用于改变样式:-->
<script type="text/javaScript">
new Vue({
el:"#vbindclass",
data:{
use:true
}
})
</script>
<!--文本使用 v-html 指令用于输出 html 代码:-->
<script type="text/javaScript">
new Vue({
el:"#html",
data:{
html:'Hellow World!'
}
})
</script>
<!--构造器内容-->
<script type="text/javaScript">
var date={
name:"金蝉子-陈袆-玄奘法师、齐天大圣-孙悟空(杜撰)、天蓬元帅-猪刚鬣(杜撰)、卷帘大将-沙悟净(杜撰)、西海三太子-敖杰(杜撰)",
address:"西天雷音寺(天竺国王舍城外的那烂陀寺)",
alexa:"10000"
}
var vm=new Vue({
el:"#vue_dat",
data:date,
methods:{
dowhat:function(){
return this.name+"去"+this.address+"取经";
}
}
})
// 它们引用相同的对象!
document.write(vm.name == date.name) // true
//设置属性会改变原始属性
vm.name="西天五人组"
document.write(date.name+"<br>")
//提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
//document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
<!--双向绑定-->
<script type="text/javaScript">
new Vue({
el:"#app",
data:{
message:'Hellow World!'
}
})
</script>
</html>
vue--模板语法的更多相关文章
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法(二)
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- (32)Vue模板语法
模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
随机推荐
- saltstack高效运维
saltstack高效运维 salt介绍 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. salt强大吗 系统管理员日常会 ...
- windows+nginx负载测试
系统:windows2003nginx版本:1.7.3(官方推荐版本 #父节点 http upstream cluster_1{ ip_hash;#能较好地把同一个客户端的多次请求分配到同一台服务器处 ...
- 逐帧动画 两种实现方式 css和js
第一种: css部分: <style> #foxtail{ background: url(../img/foxtail.png) 0 0 no-repeat; width: 156px; ...
- Python 元组tuple相关知识
列表是有序的,列表元素可以被修改.元组是有序的,元组的一级元素不可被修改,但如果是元组的二级.三级元素并且刚好该元素是列表,则可以被修改.元组中的元组可进行for 循环,因此元组也是可迭代对象.字符串 ...
- bll
string str = ConfigurationManager.AppSettings["DBName"].ToString(); public Studal ss() { A ...
- java第11周
1.JPQL查询 JPQL全称Java Persistence Query Language 基于首次在EJB2.0中引入的EJB查询语言(EJB QL),Java持久化查询语言(JPQL)是一种可移 ...
- nova98 假区域链 骗人项目(vexx.pro的前身)
首先,我是受害者. nova98前期是vexx.pro,前期推广送比特龙, 送3个,然后推广一个新人可以再拿到1.5个. 然后呢,现在就又推出一个新网站,nova98,把之前推广的人领到币全部清零,而 ...
- SpringBoot的学习【5.Spring Boot 的配置文件】
1.配置文件的名称 Spring Boot 会将两种名称的文件默认为项目的全局配置文件.配置文件的名字是固定的. application.properties application.yml 2.配置 ...
- DNS学习笔记
一.域名的层级结构 主机名.次级域名.顶级域名.根域名 # 即 host.sld.tld.root 比如,域名math.stackexchange.com显示为math.stackexchange.c ...
- header头 下载文件 参数详解
header( header( header( header( header( header( header( header( header( //2 浏览器不会响应缓存 //1 Public指示响应 ...