Vue模板语法

一.插值

1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue插值</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul> <li>
<h3>文本</h3>
{{msg}}
</li>
<li>
<h3>Html字符串渲染</h3>
<div v-html="htmlSter"></div>
</li>
<li>
<h3>v-bind属性绑定</h3>
<input type="text" value="" />
<input type="text" v-bind:value="age" />
</li>
<li>
<h3>表达式</h3>
{{str.substr(,).toUpperCase()}}
{{ number + }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'Hollo Vue!!!',
htmlSter:'<span style="color: red;">Html字符串渲染</span>',
age:,
str:'https://www.baidu.com',
number:,
ok:true,
id:
}
})
</script>
</html>

二.指令

 指的是带有“v-”前缀的特殊属性

1.2.1 核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model/v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"

v-for:类似JS的遍历,
遍历数组: v-for="item in items", items是数组,item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标

v-bind
v-on
v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>分支</h3>
<div v-if="score > 90">A</div>
<div v-else-if="score > 70">B</div>
<div v-else-if="score > 60">C</div>
<div v-else-if="score < 50">D</div>
<div v-else=" "></div>
<input type="text" v-model="score" />
</li>
<!-- 分清楚v-fi跟v-show的区别 -->
<!-- v-if:控制的是标签是否打印
v-show:控制的是标签的样式
-->
<li>
<h3>v-show指令</h3>
<div v-show="flag">hollo</div>
<div v-if="flag">hollo !!!</div>
</li>
<li>
<h3>v-for指令</h3>
<div v-for="item,index in data1">
{{item}}~{{index}}<br />
</div>
<hr />
<div v-for="item,index in data2">
{{item.id}}~{{item.name}}~{{index}}<br />
</div>
</li>
<li>
<h3>动态参数</h3>
<button v-on:[evname]="xxx">动态参数</button>
<input type="text" v-model="evname" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
score:,
flag:false,
data1:[,,,,],
data2:[{
id:,
name:'!!!'
},
{
id:,
name:'......'
},
{
id:,
name:'。。。'
}
],
evname:'click' },
methods:{
xxx(){
console.log('方法被调用!!!')
}
}
})
</script>
</html>

三. 过滤器

全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});

vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
<!-- 在两个大括号中 -->
{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1:过滤器函数接受表达式的值作为第一个参数
注2:过滤器可以串联
{{ message | filterA | filterB }}
注3:过滤器是JavaScript函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}

注4:js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue过滤器</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>局部过滤器注册</h3>
{{msg}}<br />
{{msg | a}}<br />
{{javax1 | a}}<br />
</li>
<li>
<h3>局部过滤器串联</h3>
{{javax1 | a | b}}
</li>
<li>
<h3>全局过滤器注册</h3>
{{javax1 | c}}
</li> </ul>
</div>
</body>
<script type="text/javascript">
Vue.filter(
'c',function(v){
console.log(v);
return v.substring(,);
}
),
new Vue({
el:'#app',
data:{
msg:'https://www.baidu.com',
javax1:'https://www.javax1.com'
},
filters:{
'a':function(v){
console.log(v);
return v.substring(,);
},
'b':function(v){
console.log(v);
return v.substring(,);
}
}
})
</script>
</html>

四.计算机属性与监听属性

4. 计算属性
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新
computed:{}

5. 监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化
watch:{}

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue计算监听</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>计算属性</h3>
单价:<input v-model="price" />
数量:<input v-model="num" />
总价: {{total}}
</li>
<li>
<h3>监听属性</h3>
km:<input v-model="km"/>
m:<input v-model="m" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
price:,
num:,
km:,
m:
},
computed:{
total(){
return parseInt(this.price) * parseInt(this.num);
}
},
watch:{
km(v){
this.m = v * ;
},
m(v){
this.km = v/;
}
}
})
</script>
</html>

Vue模板语法(一)的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  3. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. 初始Vue、Vue模板语法、数据绑定(2022/7/3)

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  5. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  6. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  7. Vue模板语法(二)

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  8. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  9. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. ipxe(可选):winboot:网络引导(启动)wim格式的windows PE系统:配置文件写法

    ipxe 无盘[网络]引导wim格式的pe系统 wimboot引导程序需要为其提供4个内核参数 bcd bootmgr boot.sdi boot.wim 所需文件附件 以下是我的可用的ipxe的配置 ...

  2. 2019-11-29-VisualStudio-断点调试详解

    原文:2019-11-29-VisualStudio-断点调试详解 title author date CreateTime categories VisualStudio 断点调试详解 lindex ...

  3. 在 Windows 上的 Visual Studio 中使用 Python

    地址:https://docs.microsoft.com/zh-cn/visualstudio/python/tutorial-working-with-python-in-visual-studi ...

  4. K8S CoreDNS部署失败,发现的一个问题

    K8S CoreDNS部署失败,查看错误日志,提示如下 root >> kubectl get all --all-namespaces -o wide root >> kub ...

  5. 对Haskell这门语言的基本认识

    Haskell语言的核心特征: 1. 函数式,而且是纯函数式(purely functional) 首先,引用一下维基百科上对“典型的函数式编程语言”的划分: 一: 纯函数式 1. 强静态类型: Mi ...

  6. LearnOpenGL笔记(1)搭建环境

    之前有写过Unity Shader,但不过是东拼西凑,对其中的原理可以说完全不清楚,现在准备好好从opengl开始,学习这基础又重要的内容. LearnOpenGL CN是一个超超超炒鸡好的openG ...

  7. Python中的@函数装饰器到底是什么?

    在解释@函数装饰器之前,先说一下,类中的类方法和静态方法. 在Python中完全支持定义类方法.静态方法.这两种方法很相似,Python它们都使用类来调用(ps:用对象调用也可以). 区别在于:Pyt ...

  8. springboot启动报错,Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.

    报错: Error starting ApplicationContext. To display the conditions report re-run your application with ...

  9. 隐马尔科夫模型(Hidden Markov Models) 系列之五

    转自:http://blog.csdn.net/eaglex/article/details/6458541 维特比算法(Viterbi Algorithm) 找到可能性最大的隐藏序列 通常我们都有一 ...

  10. httpclient解析

    1.HttpClient简介 HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性,它不仅使客户端发送Http请求变得容易,而且也方便开发人员测试接口(基于Http ...