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基础系列目录 < ...
随机推荐
- mysql锁机制 读书笔记
目录 MySQL锁机制 1.什么是锁 2.lock与latch 3.InnoDB存储引擎中的锁 3.1锁的类型 3.2 一致性非锁定读 3.3 一致性锁定读 4 锁的算法 4.1行锁的3中算法 4.2 ...
- 如何在Ubuntu Server 18.04 LTS中配置静态IP地址
安装Ubuntu Server 18.04后需要分配一个的静态IP地址.先前的LTS版本Ubuntu 16.04使用/etc/network/interfaces文件配置静态IP地址,但是Ubuntu ...
- 5分钟看懂系列：Python 线程池原理及实现
概述 传统多线程方案会使用"即时创建, 即时销毁"的策略.尽管与创建进程相比,创建线程的时间已经大大的缩短,但是如果提交给线程的任务是执行时间较短,而且执行次数极其频繁,那么服务器 ...
- vue-element-admin项目核心总结
1.搭建项目 按照官方文档把整个项目下载下来,安装依赖包npm install, 然后npm run dev 启动项目. 2.项目自定义优化 删除不要的文件,启动项目登录后,发现里面有很多页面,对我们 ...
- 深入浅出 Git
开篇 你可能遇到过 如果你遇到这个场景,那你可能需要版本控制. 什么是版本控制 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了文件的什么内容等信息忠实地了已录下来.每一次文件的改变 ...
- 后台返回的json数据，前台需要修改对象的键值名，重新修改数据格式
//例如,后台返回的数据为: var json = { data: [ {value: 103.95, name: "法拉利"}, {value: 103.2, name: & ...
- easyui 动态添加input标签
动态添加easyui控件<input class=" easyui-textbox" > 这样是无效的,因为easyui没有实时监控,所以必须动态渲染$.parser. ...
- Keras使用多个GPU并行
model = Model(inputs=[v_i, v_j], outputs=output_list) model = multi_gpu_model(model,4) model.compile ...
- Redis的内存淘汰
Redis占用内存大小 我们知道Redis是基于内存的key-value数据库,因为系统的内存大小有限,所以我们在使用Redis的时候可以配置Redis能使用的最大的内存大小. 1.通过配置文件配置 ...
- windows server 2012 R2里IIS配置.net core2.1遇到的坑
首先刚接触.net core不久,在本地也是简单写点测试程序,没遇到过什么问题,感觉还行,最近朋友搞了个asp.net core2.1的程序,让我给他服务器配置一下,我想这都跨平台了有什么难的吗?拿来 ...