2020-9-1 VUE学习（一）一些基础模板语法

VUE官网 : https://cn.vuejs.org/v2/api/

说明 ：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性 。

一、基础VUE使用

<script src="./vue.js"></script>
<script>
	const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        }
    })
</script>

说明：上面代码为最基础的一种VUE使用方法，创建 Vue 对象时，在 data 中添加的数据属性，会被自动挂载到创建的 Vue 对象下，即可以使用 vm.message 获取或设置 data 中添加的数据，在 Vue 对象下，还会自动挂载对象里 $el 、$data(或 _el 、_data) 这样的属性，表示对应的视图节点、data 数据对象。

注意，通常在 data 数据中的属性名称不以 $ 或 _ 开头，因为 data 中的这些数据会被自动挂载到 Vue 实例下，如果以 $ 或 _ 开头，则可能覆盖原有的 Vue 实例下的属性。(非要以 $ 开头的话可以使用 $data.$message来获取)

二、VUE基础模板语法

我们先自定义一个VUE对象

// 先插入 VUE 库
<script src="./vue.js"></script> 

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                html: '<input type="text" placeholder="请输入文本内容" />',
                tip: '这是提示文本内容',
                result: 0,
                visible: true,
                // cart: Array(4).fill(null).map((v, i) => {
                //   return {
                //     id: i,
                //     title: '商品标题' + i,
                //     price: Math.random()
                //   }
                // })
                cart: Array(4)
                    .fill(null)
                    .map((v, i) => ({
                        id: i,
                        title: '商品标题' + i,
                        price: Math.random()
                    }))
            },
            methods: {
                // 方法
                clickHandler(a, b, c) {
                    console.log('点击', c)
                    console.log(this)
                    this.result = a + b
                }
            }
        })
    </script>

那么后面我们所有的操作都是在 id 为 app 的div里进行 :

<div id="app">
    ...
</div>

1. 文本插值

{{ expression }}

注意：在双花括号内部写的是 JS 的表达式内容，不能够写语句（if 循环这种就不行），是一个有明确结果或值的内容

<div>{{ message }} -- {{ 3 + 2 - 5 * 0 + 3 }} -- {{ message.split('').reverse().join('') }}</div>

2. 指令：标签内部一个有特殊作用的属性

①、v-html：

我们先来看看 v-html 与 {{ html }} 的区别

<div>{{ html }}</div>              //  ==> <input type="text" placeholder="请输入文本内容" />

<div v-html="html"></div>         // ==> 输出为一个 表单 单位框

故，v-html 的作用为：将文本内容作为 html 文本字符串渲染。注意：使用 v-html 时需要保证所渲染的字符串的内容是可信的内容，如果是渲染用户输入的一些数据，则通常需要转义（因为可能用户输入的内容可能导致 XSS 攻击）


②、v-text :

<div v-text="html"></div>       // ==> <input type="text" placeholder="请输入文本内容" />

将文本内容作为纯文本字符串渲染


③、v-bind 可简写为 :

<div v-bind:title="tip">这是一段文本内容</div>
<div :title="tip">这是一段文本内容</div>

动态绑定属性值，注意，在元素的属性值绑定时，不能直接使用 {{ }} 语法 。


④、v-on 可简写为 @

<button v-on:mousedown="clickHandler(5, 8, $event)">按钮 {{ result }}</button>
<button @click="clickHandler">按钮</button>

⑤、v-if & v-else & v-else-if

<button @click="visible=!visible">显示/隐藏</button>
<div v-if="visible" class="if">if 显示</div>
<div v-else class="else">else 显示</div>

条件渲染使用到的指令，通过点击 button 来切换两个 div 的显示，注意， v-if 会直接删除隐藏的div


⑥、v-show

<div v-show="visible">show的作用</div>

满足条件时显示节点，否则隐藏，与 v-if 的区别：

v-if 有更高的切换开销，v-show 有更高的初始化开销，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

后语：剩下的一些指令见 VUE学习（二）