Vue.js----入门 (2)----Vue起步，v-cloak、v-text、v-html等指令的用法以及区别

最新推荐文章于 2022-04-08 10:35:25 发布

Nan YI I

最新推荐文章于 2022-04-08 10:35:25 发布

阅读量369

点赞数 1

分类专栏： Vue 文章标签： sass node.js 前端 vue

本文链接：https://blog.csdn.net/qq_41918166/article/details/111866411

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、Vue.js 起步
- 1、Vue案例具体分析
二、指令
三、Vue中 {{}}，v-cloak、v-text、v-html

一、Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现，语法格式如下：

var vm = new Vue({
  // 选项
})

1、Vue案例具体分析

<div id="vue_NanYii">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "南一小宝宝啊",
            url: "https://blog.csdn.net/qq_41918166",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + "南一小宝宝啊";
            }
        }
    })
</script>

注意：可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_NanYii，在 div 元素中：

<div id = "vue_NanYii"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象：

-data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

-methods 用于定义的函数，可以通过 return 来返回函数值。

-插值表达式{{ }} 用于输出对象属性和函数返回值。

<div id="vue_NanYii">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 -南一小宝宝啊</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_NanYii">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们自己定义的数据对象
	var data = { site: "南一小宝宝啊", url: "https://blog.csdn.net/qq_41918166", alexa: 10000}
	var vm = new Vue({
		el: '#vue_NanYii',
		data: data
	})
  // Vue 实例提供的实例属性
	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue_NanYii')) // true
	</script>
</body>
</html>

二、指令

指令是带有 v- 前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到 DOM 上，vue提供了少量指令供大家使用，在一定程度上简化了开发过程。当然除了内置指令，还有自定义指令，本篇就是只对内置指令进行讲解，Vue中的内置指令如下：
v-cloak：用于解决插值表达式{{}}的闪烁问题
v-text：用于更新元素的文本内容
v-html：用于更新元素的文本内容
v-bind：更新HTML元素的属性
v-on：用于监听DOM事件，并在触发的时候运行一些JavaScript代码
v-model：是用在表单、和元素上创建双向数据绑定
v-show：根据表达式的值的真假，来显示和隐藏HTML元素，当表达式的值为true时则表示显示HTML元素，当表达式的值为false时则表示隐藏HTML元素运行
v-if/v-else-if/v-else：用于实现条件判断的，当表达式的值为true时才会执行
v-for：通过循环的方法渲染一个列表，循环对象可以是对象和数组
v-pre：是跳过这个元素和它的子元素的编译过程，当子元素也挂载了vue实例则该子元素不受影响，该指令不需要表达式。
v-once：让元素或组件值渲染一次，该指令不需要表达式

三、Vue中 {{}}，v-cloak、v-text、v-html

1. 插值表达式 {{}}

（1）：案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 南一小宝宝啊</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

其中插值表达式后面可以直接进行内容的拼接，对上面例子中< div>进行改造如下：

<div id="app">
  <p>{{ message }} 哈哈哈</p>
</div>

运行后会输出：Hello Vue.js! 哈哈哈！
(2):v-cloak 解决 {{}} 闪烁问题

页面加载时，{{}}会先被当作文本输出在页面上，渲染结束后，才会将数据填充进去，显示为我们想要的内容，当网速较慢，加载页面时，页面上可能会出现未经渲染的{{message}}，这时候对于不懂计算机的用户们显得很不友好，所以v-cloak就是专门了解决这种问题的。
v-cloak使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 南一小宝宝啊</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
        [v-cloak]{
            display: none;
        }
</style>

</head>
<body>
<div id="app" v-cloak>
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

注意：但有时添加完毕后变量仍会显示（即闪烁问题没解决），这是怎么回事呢？原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，所以最好再添加一个 !important ，将其优先级设置为最高，防止被其他优先级高的dispaly:none样式所覆盖。

<style>
        [v-cloak]{
            display: none !important;
        }
</style>

当我们使用webpack和vue-router创建的项目时，项目中只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，都是页面渲染完成后挂载上去的，所以实际项目中根本不需要v-cloak。

2.v-text

v-text 可以取代插值表达式 {{}}，并且不会出现闪烁问题，但是其是直接替换的后面整个文本，之前的值会被覆盖掉，但是插值表达式 {{}} 只会替换自己的这个占位符。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-text 测试实例 - 南一小宝宝啊</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
   <p v-text="message"> 南一 </p>  <! 输出为：Hello Vue.js!，会把南一给覆盖掉>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

v-text:后面也可以拼接字符串，不过必须用单引号 " 给包起来，如下：

<div id="app" v-cloak>
     <p v-text="message+'这是v-text的拼接！'"></p>  <! Hello Vue.js!这是v-text的拼接！>
</div>

3.v-html

向页面输出html,与v-text一样，v-html也会覆盖掉元素中原本的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html 测试实例 - 南一小宝宝啊</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p v-text="message"></p>  /-输出的是 <a href="www.baidu.com">百度</a>
  <p v-html="logo"></p>     /-输出的是 百度(超链接)
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<a href="www.baidu.com">百度</a>',
    logo:'<a href="www.baidu.com">百度</a>'
  }
})
</script>
</body>
</html>

注意：若是普通文本内容，v-text与v-html没区别，所以尽量使用v-html,因为v-text效率没v-html效率高

4.三者的区别

1、{{}}与v-text的区别:

(1) 默认v-text是没有闪烁问题，{{}}存在闪烁的问题

(2) v-text会覆盖掉元素中原本的内容，但是{{}}只会替换自己的这个占位符。

2、{{}}、v-text与v-html的区别:

(1) 前两个向页面渲染普通文本，后者向页面输出html。

(1) 与v-text一样，v-html也会覆盖掉元素中原本的内容。

Nan YI I

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue.js----入门 (2)----Vue起步，v-cloak、v-text、v-html等指令的用法以及区别

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、Vue.js 起步 1、Vue案例具体分析二、Vue中 {{}}，v-cloak、v-text、v-html1. 插值表达式 {{}}2.v-text3.v-html4.三者的区别一、Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现，语法格式如下：var vm = new Vue({ // 选项}) 1、Vue案例具体分析<div id="vue_NanYii">
复制链接

扫一扫