Vue学习笔记-02-指令

文章目录

  • 一、指令
    • 1.1 模板语法概述
    • 1.2 v-cloak指令 解决插值表达式闪动的问题
    • 1.3 v-text 纯文本填充
    • 1.4 v-html 填充HTML片段
    • 1.5 v-pre 填充原始信息
    • 1.6 数据响应式
    • 1.6 v-once 只渲染一次
    • 1.7 v-model 数据双向绑定

一、指令

1.1 模板语法概述

Vue学习笔记-02-指令_第1张图片

1.2 v-cloak指令 解决插值表达式闪动的问题

用法:

{ {msg}}

插值表达式存在的问题:“闪动”
如何解决该问题:使用v-cloak指令
解决该问题的原理:先隐藏,替换好值之后再显示最终的值
解题步骤:
1、提供样式
2、在插值表达式所在的标签中添加v-cloak指令

<script src="js/vue.js">script>
<style>
    [v-cloak]{
      
        display: none;
    }
style>

<body>
	<div id="app">
	    <div v-cloak>{
    {msg}}div>
	div>
<script>
    new Vue({
      
        el:'#app',
        data:{
      
            msg:'Hello,world',
        }
    });
script>
body>

效果:
Vue学习笔记-02-指令_第2张图片

1.3 v-text 纯文本填充

语法:

v-text 填充纯文本

  1. 相比插值表达式更加简洁
  2. 无“闪动”
<div id="app">
        <div v-text='msg'></div>
</div>
<script src='vue.js></script>
<script>
     var vm = new Vue({
     
         el:'#app',
         data:{
     
             msg:'hello Vue',
             msg1:'

HTML

'
} }); </script>

效果:
Vue学习笔记-02-指令_第3张图片

1.4 v-html 填充HTML片段

语法:


v-html 填充HTML片段
1、存在安全问题
2、本网站内部数据可以使用,来自第三方的数据不可以用

<div id="app">
    <!-- 会执行HTMl标记语言 -->
    <div v-html='msg'>  </div>
</div>
<script src='vue.js></script>
<script>
     var vm = new Vue({
     
         el:'#app',
         data:{
     
             msg:'

HTML

'
} }); </script>

效果:
Vue学习笔记-02-指令_第4张图片

1.5 v-pre 填充原始信息

语法:

{ {msg1}}

显示原始信息,跳过编译过程


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习3-2title>
head>
<body>
    <div id="app">
        <div>{
    {msg}}div>
        <div v-text='msg'>div>

        <div v-html='msg1'>div>

        
        <div v-pre>{
    {msg1}}div>
    div>
    <script src="js/vue.js" type="text/javascript" charset='utf-8'>script>
    <script>
        var vm = new Vue({
      
            el:'#app',
            data:{
      
                msg:'hello Vue',
                msg1:'

HTML

'
} });
script> body> html>

效果:
Vue学习笔记-02-指令_第5张图片

1.6 数据响应式

什么是数据响应式?
Vue的数据响应式就是比如说你在浏览器的console面板更改变量的值,那么对应的页面里边的内容也会改变。
例如:

<body>
    <div id="app">
        <div>{
     {
     msg}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
     
            el:'#app',
            data:{
     
                msg:'HelloWorld'
            }
        });
    </script>
</body>

效果:
Vue学习笔记-02-指令_第6张图片

1.6 v-once 只渲染一次

v-once只渲染一次,随后的渲染会当作静态内容跳过,提高性能

<body>
    <div id="app">
        <div>{
     {
     msg}}</div>
        <div v-once>{
     {
     info}}</div>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
     
            el:'#app',
            data:{
     
                msg:'HelloWorld',
                info:'你好'
            }
        });
    </script>
</body>

效果:
Vue学习笔记-02-指令_第7张图片

1.7 v-model 数据双向绑定

什么是双向数据绑定?请看下图:
Vue学习笔记-02-指令_第8张图片
实例代码:

<body>
    <div id="app">
        <div>{
     {
     msg}}</div>
        <input type="text" v-model='msg'>
    </div>
    <script>
        var vm=new Vue({
     
            el:"#app",
            data:{
     
                msg:'hello,world'
            }
        });
    </script>
</body>

你可能感兴趣的:(Vue学习笔记,vue)