vue初使用

Vue模板语法

1.插值表达式

是vue框架提供的一种在HTML模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。

插值表达式的写法支持使用：

变量名

部分JavaScript表达式

注：{{ }}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句

三元运算符

方法调用（方法必须需要先声明）

<body>
    <div id="app">
        <!-- 直接使用变量名 -->
        <h5>{{name}}</h5>
        <!-- 运算 -->
        <h5>{{name + '--好的'}}</h5>
        <h5>{{ 1 + 1 }}</h5>
        <!-- 使用函数 -->
        <h5>{{title.substr(0,6)}}</h5>
        <!-- 三目运算 -->
        <h5>{{ age > 18 ? '成年' : '未成年'}}</h5>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            title: "我是一个标题，你们看到没有",
            name: "张三",
            age: 20,
        },
    });
</script>

2.指令

指令的本质就是标签中的vue自定义属性

指令格式以“v-”开始，例如：v-cloak，v-text、v-html等

指令的含义：在vue的html中，以v-开头的自定义属性就是指令。

作用

语法糖：复杂操作的简化形式

当表达式的值改变时，将其产生的连带影响，响应式地作用于页面（DOM）。（简化操作）

3.v-cloak

作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题

原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果

注意：需要与CSS规则一起使用

<style>
    /* 属性选择器 */
    [v-cloak] {
        display: none;
    }
</style>
<body>
    <div id="app" v-cloak>{{msg}}</div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "PHP是世界上最美的语言",
        },
    });
</script>

4.数据绑定指令

4.1v-text 填充纯文本

相比插值表达式更加简洁

不存在插值表达式的闪动问题

<div id='app'>
	<span v-text="msg"></span>
	<!-- 和下面的一样 -->
	<span>{{msg}}</span>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

4.2 v-html 填充HTML片段

v-html尽量少用甚至不用，因为可能引发XSS（跨站脚本攻击，XSS）攻击。

本网站内部数据可以使用，来自第三方的数据不可使用

<div id='app'>
    <div v-html="html"></div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

4.3 v-pre 填充原始信息

跳过表达式的编译过程，显示原始信息

<span v-pre>{{ this will not be compiled }}</span>

有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如：

<div v-html='"msg"'></div>
<div v-html="'msg'"></div>

5.v-once

作用：只渲染元素和组件一次，之后元素和组件将失去响应式（数据层面）功能

<div id="app">
	<h3>{{message}}</h3>
	<!-- 动态修改message值，此绑定将不会发生改变 -->
	<div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>

6.v-bind

作用：动态地绑定一个或多个attribute【组件内：一次声明，多次使用】

场景：复用某个数据的时候会使用。

<body>
    <div id="app">
        <!-- v-bind：给非指令的属性使用变量 -->
        <a v-bind:href="url" v-bind:target="target">{{alt}}</a>
        <hr>
        <!-- v-bind的简写形式，实际使用这样的写法 -->
        <a :href="url" :target="target">{{alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            url: "https://www.fliggy.com",
            alt: "飞猪网",
            target: "_blank"
        }
    })
</script>