目录
1、Vue简介
1.1 什么是Vue
Vue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1.2 Vue的特点是什么
1、组件化,清晰的文档结构
2、声明渲染,数据渲染视图(页面)
<body>
<!-- 写视图层,我们要展示的内容 -->
<div id="app">
展示区域
<!-- 插值表达式 {
{}}-->
{
{msg}}
{
{num * 2 + 3}}
</div>
</body>
<script>
var app = new Vue(
{
// 控制区域
el:"#app",
// 数据
data:{
msg:"hello word22!",
num:100
},
methods: {
},
}
)
</script>
1.3 Vue结构:
(1):首先引入vue.js。
(2):写视图层,我们需要展示的内容(插值表达式:{
{插入内容}})。
(3):创建实例化对象Vue,第一个属性是控制区域:el:(“#id”),第二个属性是数据: data:{存放我们的数据},第三个属性是methods:{放我们的方法}
(注意:都是通过this对象去拿的,通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。)
2、Vue的常用指令
2.1 v-cloak
在我们加载Vue之前v-cloak是存在的,Vue加载结束后v-cloak就隐藏了,利用这个特性可以实现:页面防止闪烁
2.2 解析文本 v-text、v-html
v-text和v-html都可以进行文本的解析,他们的区别是:
v-html可以转义标签和渲染数据,v-text不能转义标签只能渲染数据
v-html 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="box">
<div v-cloak>{
{msg}}</div>
<div>{
{html}}</div>
<!-- v-html 能够解析富文本 会覆盖原来的内容 -->
<div v-html="html"> 12312312312</div>
</div>
</body>
</html>
<script>
const vm = new Vue({
el:'#box',
data: {
msg:'Heavens official blessings, no taboos',
html:'<h1>hhh</h1>',
},
methods: {
},
})
</script>
v-text 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="box">
<div v-cloak>{
{msg}}</div>
<div>{
{text}}</div>
<div v-text="html"></div>
</div>
</body>
</html>
<script>
const vm = new Vue({
el:'#box',
data: {
msg:'Heavens official blessings, no taboos',
text:'<h1>hhh</h1>',
},
methods