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

  1. Vue基础（一）---- 模板语法

    1.基本理解 Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码. 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构 ...

  2. Vue基础之Vue组件

    Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!

  3. vue简介、入门、模板语法

    在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...

  4. Vue基础开发入门之简单语法知识梳理（思维导图详解）

    基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)

  5. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  6. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  7. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  8. vue - vue基础/vue核心内容（终结篇）

    今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...

  9. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. Blogs实现导航菜单

    #1.隐藏默认导航菜单 #header{display:none;} /*在页面定制CSS里面最前面添加如下代码,最好添加在最前面*/ #2.添加页首html代码 <!-- 添加博客导航栏信息开 ...

  2. Dubbo服务调用过程源码解析④

    目录 0.服务的调用 1.发送请求 2.请求编码 3.请求的解码 4.调用具体服务 5.返回调用结果 6.接收调用结果 Dubbo SPI源码解析① Dubbo服务暴露源码解析② Dubbo服务引用源 ...

  3. Java安全之初探weblogic T3协议漏洞

    Java安全之初探weblogic T3协议漏洞 文章首发自安全客:Java安全之初探weblogic T3协议漏洞 0x00 前言 在反序列化漏洞里面就经典的还是莫过于weblogic的反序列化漏洞 ...

  4. 通过`RestTemplate`上传文件(InputStreamResource详解)

    通过RestTemplate上传文件 1.上传文件File 碰到一个需求,在代码中通过HTTP方式做一个验证的请求,请求的参数包含了文件类型.想想其实很简单,直接使用定义好的MultiValueMap ...

  5. ABP框架中短信发送处理，包括阿里云短信和普通短信商的短信发送集成

    在一般的系统中,往往也有短信模块的需求,如动态密码的登录,系统密码的找回,以及为了获取用户手机号码的短信确认等等,在ABP框架中,本身提供了对邮件.短信的基础支持,那么只需要根据自己的情况实现对应的接 ...

  6. java之volatile

    一.谈谈对volatile的理解 volatile是java虚拟机提供的轻量级的同步机制 保证可见性.不保证原子性.禁止指令重排 1.可见性理解:所有线程存放都是主内存的副本(比如某个变量值为25), ...

  7. Wi-Fi 6 与 5G 相比哪个更快？

    随着 iPhone12 的发布,iOS 系统正式开始拥抱 5G,智能手机全面进入了 5G 时代.伴随着各大运营商的 5G 推广以及相关基站建设的如火如荼,5G 成了大家广泛讨论的热门词汇.这样热门的光 ...

  8. Cisco常用命令

    • 首次配置网络设备        ○ 需要使用Console线连接进行初始化配置            § 在PC使用"超级终端"或其他软件.    • 交换机的工作模式:   ...

  9. Server 2012 R2 Standard 安装运行PCS7时出现“无法启动此程序，因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll”解决方法

    网上看到了这篇文章https://www.jianshu.com/p/21f4bb8b5502,根据思路自己尝试,解决了丢失的问题.提示[计算机中丢失api-ms-win-crt-runtime-l1 ...

  10. LeetCode747 至少是其他数字两倍的最大数

    在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素的索引,否则返回-1. 示例 1: 输入: nums = [3, ...