Just do it…
🐖：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正，若有侵权，请联系我~~
参考博文连接：https://blog.csdn.net/weixin_34021089/article/details/91871486?utm_source=app
Vue–vue实例、模板语法（插值、指令、缩写）
一、vue实例化
var vm = new Vue({ //vm表示Vue实例
//属性和方法
})
例如：
var vm = new Vue({ //实例化vue, vue开始渲染的地方
el: "#box", //el为Element的缩写，表示对id为box的地方渲染
data: { //data用于数据的存储
name:"Gladiola",
Hello: "<h1>Hello, Vue</h1>",
ok:true
}
})
二、模板语法
插值 ---- {{ }}
a.文本：数据绑定最常见的形式就是使用双大括号{{ }}的文本插值
b.原始的html:双大括号会将数据解释为普通文本，而非html代码，为了输出正真的html,需要使用v-html指令。（需要注意的是，动态渲染任意html可能会非常危险，因为它很容易导致xss攻击）
c. 使用js表达式：这些表达式会在所属Vue实例的数据作用域下作为javascript被解析，有个限制就是，每个绑定都只包含单个表达式。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<p>my name is {{name}}</p> <!--插值---文本-->
<p v-html="Hello"></p> <!--插值---原始的html-->
{{10 + 20}} <!--插值---表达式-->
<br/>
{{ok ? 'yes' : 'no'}} <!--插值---表达式-->
</div>
<script type="text/javascript">
var vm = new Vue({ //实例化vue, vue开始渲染的地方
el: "#box", //表示对id为box的地方渲染
data: {
name:"Gladiola",
Hello: "<h1>Hello, Vue</h1>",
ok:true
}
})
</script>
</body>
</html>
指令
a. 解释：指令是带有 v- 前缀的特殊属性
b. 作用：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
c.eg: v-text、v-html、v-if、v-show、v-bind、v-on等
修饰符
修饰符是以半角句号**.**指明的特殊后缀，用于指出一个指令应该以特殊的形式绑定，例如:
<li @click.stop="handleLiClick">111</li>
<!-- 修饰符告诉.stop指令,对于触发事件调用event.stopPropagation(),阻止冒泡 -->
缩写
a. v-bind的缩写用冒号表示 ：（动态绑定一个或多个特性值）
<div v-bind:style="classObj">动态绑定style</div>
<div :style="classObj">动态绑定style</div>
b. v-on的缩写用@表示：（事件监听，并触发绑定的javascript代码）
<button v-on:click="handelClick()">click</button>
<button @click="handelClick()">click</button>
扫一扫
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
