12

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

 3 years ago
source link: https://blog.csdn.net/qq_41918166/article/details/111866411
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、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也会覆盖掉元素中原本的内容。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK