vue.js模板,基于vue的前端模板
Vue使用基于HTML的模板语法，这允许开发人员以声明方式将DOM绑定到底层Vue实例的数据。下面文章主要介绍Vue的模板语法和案例的相关资料，通过示例代码详细介绍。有需要的可以参考一下。
目录
前言一、双括号表达式二、插值2.1文本2.2原HTML2.3特点2.4 javascript表达式三、指令3.1参数3.2动态参数3.3修饰符四、指令缩写4.1 v-bind4.2 v-on摘要
前言
相信大家对模板语法都有一些接触，比如百度模板引擎，ejs等等。类似地，Vue.js也使用基于HTML的模板语法，这允许开发人员以声明方式将DOM绑定到底层Vue实例的数据。Vue.js的所有模板都是合法的HTML，所以可以被遵循规范的浏览器和HTML解析器解析。通俗点说，Vue模板语法就是你用Vue.js开发时可以在HTML元素上写的操作语法，让你的开发更高效，比如绑定样式，循环出元素列表等。
一、双大括号表达式
在前端的开发过程中，为了提高开发效率，诞生了很多模板引擎来方便的渲染元素或者绑定数据。很多引擎模板采用{ {双花括号表达式}}的语法进行插值。同样，Vue.js也借鉴Angular.js的双花括号，将数据输出到页面，调用对象方法。让我们感受一下双括号表达式，创建一个新的。IED中的html后缀文件，引入Vue.js，输入以下代码，运行(用预览或迷你浏览器打开)
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
标题/标题
！-通过cdn介绍vue . js-
script src= https://cdn . bootcss . com/vue/2 . 5 . 10/vue . min . js /script
/头
身体
！-双向数据绑定-
div id=应用程序
输入类型=text v-model=msg /
p{{msg}}/p
/div
脚本
var app=新Vue({
El: #app ，//el:挂载点
数据：{
//数据：数据选项
消息：“你好”，
},
});
/脚本
/body
/html
{{msg}}在大括号中，绑定到底层Vue实例的数据在浏览器的实例数据选项中呈现为msg的值。
运行结果：
二、插值
以上，我们对双括号语法有了初步的了解。接下来，我们来学习更多的插值方法。
2.1文本
Vue.js中最常见的数据绑定形式是使用“小胡子”语法(双花括号)的文本插值：
div id=appmsg:{{msg}}/div
大括号中的值将被相应数据对象的msg属性值替换。每当绑定数据对象上的msg属性改变时，插值处的内容将被更新。
但是通过使用v-once命令，也可以进行一次插补，当数据为改变时，插补的内容为不会更新。但是你需要注意这个元素节点下其他数据的绑定，数据变化时内容不会更新，所以要注意代码块的划分。
p v-oncemsg:{{msg}}/p
2.2 原始 HTML
上面的双花括号表达式将数据解释为普通文本。即使你的数据是一个HTML元素，它也不会被呈现为相应的tag元素，而只是普通的文本而不是HTML代码。例如：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
！-通过cdn介绍vue . js-
script src= https://cdn . bootcss . com/vue/2 . 5 . 10/vue . min . js /script
/头
身体
！-数据绑定-
div id=应用程序
p{{msg}}/p
/div
脚本
var app=新Vue({
El: #app ，//el:挂载点
数据：{
//数据：数据选项
消息：“h1hello world/h1”，
},
});
/脚本
/body
/html
运行结果：
上面明明我们写的是超文本标记语言标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。有的读者会问，有的需求就是要把标签渲染出来，那么我们就需要认识另外一个指令v-html，使用它我们就能将它正确渲染，试一试，代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
！-通过内容交付网络方式引入vue.js -
脚本src= https://cdn。bootcss。com/vue/2。5 .10/vue。量滴js /脚本
/头
身体
！-虚拟超文本标记语言渲染超文本标记语言元素-
div id=app v-html=msg/div
脚本
var应用=新Vue({
el: #app ，//el:挂载点
数据：{
//数据：数据选项
消息：“h1hello world/h1”，
},
});
/脚本
/body
/html
2.3 特性
双大括号语法不能作用在超文本标记语言特性（标签属性)上，需要对标签属性操作，应该使用v型装订指令：
div-bind:class=" syl-vue-course "/div
超文本标记语言标签属性为布尔特性时，它们的存在表示为真，v绑定工作起来略有不同，在这个例子中：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
标题vue/标题
！-通过内容交付网络方式引入vue.js -
脚本src= https://cdn。bootcss。com/vue/2。5 .10/vue。量滴js /脚本
/头
身体
！-布尔特性绑定-
div id=应用程序
输入类型=复选框 v-bind:checked=已选中/
/div
脚本
var应用=新Vue({
埃尔： #app ，
数据：{
isChecked: false，//isChecked是否选中布尔型
},
});
/脚本
/body
/html
运行结果：
注意: 如果已检查的值是空、未定义或假的，则检查特性甚至不会被包含在渲染出来的投入元素中，我们将数据中的已检查值改为空
var app=new Vue({ el:#app ，数据：{ isChecked:null //isChecked是否选中} })
2.4 javascript 表达式
上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的Java脚本语言表达式支持，感受强大的模板语法力量吧！例子：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
标题vue/标题
！-通过内容交付网络方式引入vue.js -
脚本src= https://cdn。bootcss。com/vue/2。5 .10/vue。量滴js /脚本
/头
身体
！- javascript表达式-
div id=应用程序
！-运算符-
pnum 24={{num 24}}/p
！-三元表达式-
你还好吗？{{ok？"我很好!":否}}/p
！-对象方法直接调用-
p名字倒过来写：{{name.split( ).反转()。join(" " } }/p
！-属性值运算操作-
p v-bind:class= col colNum xnm/p
/div
脚本
var应用=新Vue({
埃尔： #app ，
数据：{
数字：20,
好：没错，
名称： 小牛马，
列数："12",
},
});
/脚本
/body
/html
运行结果：
三、指令
指令（指令)是带有五-前缀的特殊特性。
3.1 参数
一些指令能够接收一个"参数",在指令名称之后以冒号表示。例如，五绑定指令可以用于响应式地更新超文本标记语言特性，在这里超链接是参数，告知v型装订指令将该元素的超链接特性与表达式全球资源定位器(统一资源定位器)的值绑定，例子：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
标题vue/标题
！-通过内容交付网络方式引入vue.js -
脚本src= https://cdn。bootcss。com/vue/2。5 .10/vue。量滴js /脚本
/头
身体
！-指令参数-
div id=应用程序
一个v-bind:href=url 小牛马/a
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
网址： https://www.lanqiao.cn ，
},
});
/脚本
/body
/html
另一个例子是v-on指令，用于监控DOM事件。例如：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
title vue/标题
！-通过cdn介绍vue . js-
script src= https://cdn . bootcss . com/vue/2 . 5 . 10/vue . min . js /script
/头
身体
！-命令参数-
div id=应用程序
p我的名字是：{{name}}/p
！- handleClick让我们在实例方法中编写方法-
按钮v-on:click= handle click click me/按钮
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
姓名：牛妈，
},
方法：{
//实例方法对象
handleClick: function () {
this.name=this.name.split( )。反转()。联接(“”)；
},
},
});
/脚本
/body
/html
运行结果：
3.2 动态参数
我们把以上属性或事件写死。其实在Vue中也可以是动态的。
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
title vue/标题
！-通过cdn介绍vue . js-
script src= https://cdn . bootcss . com/vue/2 . 5 . 10/vue . min . js /script
/头
身体
！-指令的动态参数-
div id=应用程序
p我的名字是：{{name}}/p
按钮v-on:[event]= handle click click me/按钮
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
名称：实验楼，
事件：“点击”，
},
方法：{
handleClick: function () {
this.name=this.name.split( )。反转()。联接(“”)；
},
},
});
/脚本
/body
/html
此时event的值为click，所以当我们点击按钮时，会触发事件回调，运行结果同上。
3.3 修饰符
修饰符是由半角句点表示的特殊后缀。它们用于指示指令应该以特殊方式绑定。它们大致可以分为三类，我们将在下面的课程中逐一讨论：
事件修饰符键修饰符系统修饰符例如。事件修饰符中的prevent修饰符与本机event.preventDefault()具有相同的效果，后者可以阻止事件的默认行为。单击表单中的提交按钮，将会发生页面跳转，但不会在。使用预防，例如：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
meta name= viewport content= width=device-width，initial-scale=1.0 /
meta http-equiv= X-UA-Compatible content= ie=edge /
title vue/标题
！-通过cdn介绍vue . js-
script src= https://cdn . bootcss . com/vue/2 . 5 . 10/vue . min . js /script
/头
身体
！-指令修饰符-
div id=应用程序
！-表单操作=/ v-on:=submit -
表单操作=/ v-on:submit . prevent= submit
按钮类型=提交提交/按钮
/表单
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{}，
方法：{
提交：函数(){
Console.log(成功提交！);
},
},
});
/脚本
/body
/html
没有修改器，默认跳转发生，运行效果是：
与。阻止，默认阻止跳转，运行结果为：
四、指令缩写
V-是Vue.js中的一个特定标志，用来标识模板中Vue的特定特征。当你在使用Vue.js给现有标签添加动态行为的时候，v字头是很有帮助的，但是如果你频繁使用，你会感觉不到代码的简洁，会觉得不太人性化。同时，当构建一个所有模板都由Vue管理的单页面应用程序时，v前缀就变得不那么重要了。因此，Vue为两个最常用的指令v-bind和v-on提供了特定的缩写：
4.1 v-bind
在上面的例子中，我们使用了v-bind绑定属性。
A-bind: href= url Niuma /a
我们可以缩写为：
A :href=url Niuma /a
也使用v-bind绑定的其他属性也可以缩写为：
v-bind:class= name 的缩写是：v-bind: value= myvalue 是
:值
4.2 v-on
上面的v-bind指令提供了简写，v-on指令也提供了简写，但是与v-bind有一些不同。v-on:使用@速记。
！-完整的语法-
按钮v-on:click= handle click click me/按钮
！-缩写-
Button @click=handleClick 单击我/button
总结
本文讲解了Vue.js的模板语法，了解了双括号表达式、模板插值、模板上的简单指令应用、指令的缩写方式等。相信你对Vue.js有了初步的了解。
下面解释Vue的计算属性，监听属性，过滤器。
这就是这篇关于Vue模板语法和案例的文章。有关Vue模板语法案例的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。