Vue基础之Vue的模板语法
Vue基础之Vue的模板语法
数据绑定
01 数据绑定最常见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】
<body>
<!-- Vue.js的应用可以分为两个重要的组成部分
一个是视图!
另一个是脚本!！ -->
<!-- 下面的就是视图！ -->
<div id="app">
<h1>{{message}}</h1>
</div>
<!-- 下面的就是脚本！ -->
<script type="text/javascript">
//
var app = new Vue({
el:'#app', // 这个就是你要操作的元素！
data: {
message: 'lvhang'
} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！
})
</script>
</body>
02 通过便用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留这会影响到该节点上的其它数据绑定：
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang!'
}
})
app.message = 'lvchengcxin'
</script>
</body>
如何输出原始的HTML
v-html
<body>
<div id="app">
未加v-html属性！
<div id="">
<h2>{{message}}</h2>
</div>
加上v-html属性！
<div id="">
<h2 v-html="message"></h2>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '<h2 style="color: red;">lvchengxin</h2>'
}
})
</script>
</body>
使用Vue的语法为HTML绑定属性！
v-bind
<body>
<div id="app">
<!-- 这样就可以为某一个元素动态的绑定属性了!！ -->
<div id="" v-bind:class="dynamicId">
v-bind:某一个标签具有的属性="某一个变量的值"
栗子：
v-bind:class"dynamicId" 就是为当前的标签绑定一个class属性！
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang',
dynamicId: 'app2'
}
})
</script>
<style type="text/css">
/* 我们在为你上面绑定的元素添加一个样式! */
.app2 {
color: red;
}
</style>
</body>
在模板语法中使用JavaScript表达式
01 变量的算术运算！
<body>
<div id="app">
<p>{{number1 + 10}} 结果为11</p>
<p>{{ ok ? 'YES' : 'NO' }}
<br />三元表达式的判断! ok 是一个变量 类型是 布尔类型！要在data里面进行定义!
</p>
<p>进行复杂的函数运算！<br />b
在Vue的表达式中可以完全支持JavaScript的表达式!<br /> {{ message.split('').reverse().join('') }}</p>
<div v-bind:id="'list-' + id"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang',
dynamicId: 'app2',
number1: 1,
ok: 3 < 2,
message: 'lvhang'
}
})
</script>
</body>
指令
指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
指令的参数!
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
指令的修饰符！
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<body>
<div id="app">
<!-- 指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 -->
<!-- （v-for是例外情况，稍后我们再讨论），指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM，回顾我们在介绍中看到的例子： -->
<!-- 这里，v-if指令将根据表达式seen的值的真假来插入移除<p>元素. -->
<p v-if="seen">现在你看到我了</p>
<!-- 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute： -->
<a v-bind:href="url">...</a>
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : false,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}
});
</script>
<style type="text/css">
</style>
</body>
Vue基础之Vue的模板语法的更多相关文章
- Vue基础（一）---- 模板语法
1.基本理解 Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码. 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构 ...
- Vue基础之Vue组件
Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!
- vue简介、入门、模板语法
在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...
- Vue基础开发入门之简单语法知识梳理（思维导图详解）
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- vue - vue基础/vue核心内容（终结篇）
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- 性能监控工具nmon及nmon_analyser的使用
nmon和nmon_analyser下载地址: http://nmon.sourceforge.net/pmwiki.php?n=Site.Download 使用步骤: 1.nmon 根据系统版本 ...
- 教你用python爬取抖音app视频
记录一下如何用python爬取app数据,本文以爬取抖音视频app为例. 编程工具:pycharm app抓包工具:mitmproxy app自动化工具:appium 运行环境:windows10 思 ...
- 【Hadoop】：Windows下使用IDEA搭建Hadoop开发环境
笔者鼓弄了两个星期,终于把所有有关hadoop的环境配置好了,一是虚拟机上的完全分布式集群,但是为了平时写代码的方便,则在windows上也配置了hadoop的伪分布式集群,同时在IDEA上就可以编写 ...
- sql中大于等于小于的写法
由于在mybatis框架的xml中<= , >=解析会出现问题,编译报错,所以需要转译第一种写法: 原符号 < <= > >= & ' "替换符号 ...
- 相对于Statement，PreparedStatement的优点是什么？
优点: 1.PreparedStatement有助于防止SQL注入,因为它会自动对特殊字符转义. 2.PreparedStatement可以用来进行动态查询. 3.PreparedStatement执 ...
- Java学习日报7.8
public class 定义要求文件名和类名保持一致,一个*.Java文件只允许有一个public class定义! 主方法是一切程序的起点, public static void main(Str ...
- 容器编排系统K8s之访问控制--准入控制
前文我们聊到了k8s的访问控制第二关RBAC授权插件的相关话题,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14216634.html:今天我们来聊一下k8 ...
- JAVADOC 文档注释命令
简介 javadoc命令是用来生成自己API文档的 javadoc参数信息 @author 作者名 @version 版本号 @since 指明需要最早使用的jdk版本 @param 参数名 @ret ...
- Linux 网络排错检查思路
Linux 网络排错检查思路 graph TD A[当网络不通时] --> B{ping想要访问的地址,<br>如www.runoob.com} B --> |不通| C{pi ...
- HystrixRequestContext实现Request级别的上下文
一.简介 在微服务架构中,我们会有这样的需求,A服务调用B服务,B服务调用C服务,ABC服务都需要用到当前用户上下文信息(userId.orgId等),那么如何实现呢? 方案一: 拦截器加上Threa ...