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基础系列目录 < ...
随机推荐
- 5.装饰模式 Decorator （单一职责）
结合: Android设计模式 006 装饰者模式 [B站]对整个重构的细节讲的容易懂 Android的设计模式-装饰者模式 [简书]结合安卓源码讲的还可以,让我对context有更深入的理解 ...
- Vue2+Koa2+Typescript前后端框架教程--03后端路由和三层模式配置
昨天将Koa2的基础框架和自动编译调试重启服务完成,今天开始配置路由和搭建基础的三层架构模式. 路由中间件:koa-router,即路由导航,就是我们平时使用最广泛的get/post方法执行的URL路 ...
- 容器编排系统K8s之ConfigMap、Secret资源
前文我们了解了k8s上的pv/pvc/sc资源的使用和相关说明,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14188621.html:今天我们主要来聊一下 ...
- 容器编排系统K8s之StatefulSet控制器
前文我们聊到了k8s的configmap和secret资源的说明和相关使用示例,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14194944.html:今天 ...
- [leetcode]BestTimetoBuyandSellStock买卖股票系列问题
问题1: If you were only permitted to complete at most one transaction (ie, buy one and sell one share ...
- linux中的dmesg命令以及确定进程是否被系统主动kill
linux中的dmesg命令以及确定进程是否被系统主动kill Feb 21, 2017 | java | 185 Hits 近期发现线上项目的进程莫名其妙的就不见了,也没有崩溃日志,就怀疑是被操作系 ...
- SSM框架整合模板
SSM框架整合--MAVEN依赖 spring方面(包含了springmvc): spring-webmvc:spring与mvc的整合依赖,主要包括spring的核心包和springmvc需要的包 ...
- 5.汇编实现裸机LED
首先:操作LED就要操作GPIO alpha的芯片是NXP的IMX6ULL 其GPIO和STM32的命名有所区别 可以看到IMX6ULL的GPIO以其功能进行命名,对应上图中PAD之后的部分 即G ...
- Xamarin.Form 5.0： 新功能和控件以及调试改进
上周在.NET Conf 2020,Scott Hunter(.NET),Maddy Leger(微软移动开发工具-Xamarin项目经理)和David Ortinau(首席项目经理,移动开发人员工具 ...
- 【Java基础】多线程
多线程 基本概念 程序(program)是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程(process)是程序的一次执行过程,或是正在运行的一个程序.是一个动态 ...