Vue 一套构建用户界面的渐进式的框架（模板语法篇~）
模板语法代码规范：最好每次缩进俩个空格更符合规范哟~创建Vue实例传入的optionsel类型：string | HTMLElement作用：用于挂载要管理的元素节点,值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。data类型：Object | Function（组件当中data必须是一个函数）作用：Vue实例对应的数据对象methods类型： {[key:str
·
模板语法
代码规范：最好每次缩进俩个空格更符合规范哟~
创建Vue实例传入的options
el
类型：string | HTMLElement
作用：用于挂载要管理的元素节点,值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。
data
类型：Object | Function（组件当中data必须是一个函数）
作用：Vue实例对应的数据对象
methods
类型： {[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可在指令中使用
插值操作
Mustache
是双大括号 {{}}
Mustache 语法中，不仅可以直接写变量，也可以写简单的表达式
有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
===============================================================
例如：
<body>
<div class="container">
<h2>{{firstName+" "+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{count*2}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app=new Vue({
el:".container",
data:{
firstName:"Stephen",
lastName:"Curry",
count:1
}
})
</script>
v-once
表示元素和组件只渲染一次，不会随着数据的改变而改变
代码如下，例如：
<body>
<div class="container">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: ".container",
data: {
message: "Jine"
}
})
</script>
</body>
图片如下：
v-html
某些情况，服务器响应回来的数据可能是元素标签（<a herf="xxx"></a>）
若我们直接通过{{}}输出，会将HTML代码也一起输出，所以要使用v-html按照HTML格式解析
代码如下，例如：
<body>
<div class="container">
<h1>{{message}}</h1>
<h1 v-html="message"></h1>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:".container",
data:{
message:"<a href='http://www.baidu.com'>百度一下你就知道</a>"
}
})
</script>
</body>
效果图片如下：
v-text（不推荐）
会显示文本输出，但不推荐这样写法，不如Mustache语法好用。
如：再拼接字符串时候，v-text会进行覆盖而不会去拼接
所以不进行展示说明
v-pre（不推荐）
用于跳过编译过程，直接显示原内容，并不会像mustache语法进行解析
例如：
/*若message内容为：Jine*/
<h2>{{message}}</h2>
/*结果为：Jine*/
<h2 v-pre>{{message}}</h2>
/*结果为：{{message}}*/
v-cloak
意思为斗篷，再vue声明后，会将v-cloak属性删除
例如：
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>{{message}}</div>
<script src="./vue.js"></script>
<script>
/*
设置了延迟2秒的计时器，可看出效果：
v-cloak再vue声明和绑定DOM树之前会存在
绑定成功后：vue会自动删除Dom树中的v-cloak属性
*/
setTimeout(() => {
const app = new Vue({
el:".app",
data:{
message:"Jine"
}
})
}, 2000);
</script>
</body>
v-bind（动态绑定属性）
动态绑定属性
'动态绑定属性，用来绑定一个或多个属性值。'
在开发中，有很多属性需要动态进行绑定（如：src，href，动态绑定一些类、样式等）
一般语法（v-bind:）
语法糖（:）
例如： :属性名='属性值'
若值为：null、undefined 或 false 则不会渲染到页面
有如下绑定代码，例如：
<body>
<div class="app">
<img v-bind:src="img" alt="">
<a v-bind:href="url">百度一下，你就知道</a>
<!-- 语法糖写法 -->
<img :src="img" alt="">
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:".app",
data:{
img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=121352583,3553479540&fm=26&gp=0.jpg",
url:"http://www.baidu.com"
}
})
</script>
</body>
动态绑定class（对象语法）
对象语法含义：class后面跟的是一个对象
可以动态的进行控制class的添加或删除（原生写比较麻烦）
例如，点击按钮给方块动态变色，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<style>
.view{
width: 100px;
height: 100px;
background-color: rgb(129, 46, 115);
}
.changeColor{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="app">
<div class="view" :class='{changeColor:isStatus}'></div>
<button @click='change'>点击变色</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
isStatus : false
},
methods : {
change(){
this.isStatus = !this.isStatus
}
}
})
</script>
</body>
</html>
动态绑定style（对象语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h2 :style='{color:col,fontSize:fs + "px"}'>哈哈哈哈哈</h2>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
fs : 100,
col : "red"
}
})
</script>
</body>
</html>
动态绑定class或style（数组语法，不推荐）
利用数组方式来绑定，此方法不推荐，不细写。
<div v-bind:class="[activeClass, errorClass]"></div>
errorClass 是始终存在的，isActive 为 true 时添加activeClass 类：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
v-bind 结合 for （点击文字变色）
'第一个文字默认红色，点击哪个文字，哪个变红'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点字变色</title>
<style>
.color{
color: red;
}
</style>
</head>
<body>
<div class="container">
<ul >
<li v-for='(iteam,index) in list' :class="{color:isStatus===index}" @click="change(index)">{{iteam}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el : '.container',
data : {
list : ['First','Second','Third','Fourth','Fivth'],
isStatus : 0
},
methods : {
change (index) {
return this.isStatus = index;
}
}
})
</script>
</body>
</html>
过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
实例:
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'jine'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
自定义指令
更多说明：参考Vue官方文档
例如： 定义获取元素焦点指令
Vue.directive('focus' {
inserted : (el) => {
//获取元素焦点
el.focus()
}
})
使用：
<input type='text' v-focus>
带参指令，改变元素背景色，例如：
定义：
Vue.directive('color',{
inserted : (el,binding) => {
el.style.backgroundColor = binding.value.color
}
})
使用：
<input type='text' v-color='{color:"red"}'>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)