<!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--模板语法的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  7. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  8. Vue模板语法（二）

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  9. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  10. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. Python 实现清屏

    使用Python的IDLE到某个程序节点时,需要清屏以提高清晰度. 但IDLE本身并没有这个功能,我们可以通过扩展来实现类似于Ctrl + L的清屏 资料来自于百度经验的 BinnLZeng 先制作一 ...

  2. Altium designer 新建快捷键

    示例: 1.按下Ctrl: 2.点击需要建立快捷键的图标:点击交互式布线图标,然后在选择性输入要用到的快捷键:

  3. Java 使用 Redis存储系统

    redis是一个key-value存储系统.它支持存储的value类型很多,包括string(字符串).list(链表).set(集合).zset(sorted set --有序集合)和hash(哈希 ...

  4. 查询总耗CPU最多与平均耗CPU最多的SQL语句

    总耗CPU最多的前20个SQL total_worker_time AS [总消耗CPU 时间(ms)],execution_count [运行次数], qs.total_worker_time AS ...

  5. 下载MNIST数据集脚本input_data源码

    # Copyright 2015 Google Inc. All Rights Reserved.## Licensed under the Apache License, Version 2.0 ( ...

  6. js 音乐播放器

    在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好. 好了,那我们开始做这个音乐播放器 ...

  7. makefile笔记3 - makefile规则

    target ... : prerequisites ... command ... ... 规则包含两个部分,一个是依赖关系,一个是生成目标的方法. 在 Makefile 中,规则的顺序是很重要的, ...

  8. php 多维数组 array sort 排序 :array_multisort

    1.参考链接: php简单实现多维数组排序的方法 参考二: 这个链接很好,可以直接看这个:PHP array_multisort—对多个数组或多维数组进行排序 2.案例一: //13: 最佳: pub ...

  9. 马凯军201771010116《面向对象与程序设计Java》第九周学习总结

    一.理论知识部分 异常.日志.断言和调试 1.异常:在程序的执行过程中所发生的异常事件,它中断指令的正常执行. 2.Java的异常处理机制可以控制程序从错误产生的位置转移到能够进行错误处理的位置. 3 ...

  10. 设置eclipse联想功能

    当我们在用eclipse的时候,怎么能够让自己的编码速度加快?我想利用eclipse的提示功能是其中的方法之一.下面就利出配置eclipse联想功能(代码的提示功能)的步骤: 1. 打开Eclipse ...