Vue基础-01

1. 创建Vue实例

        <div id="app">
            <p>{{message}}</p>
        </div>
        <script src="js/vue.min.js"></script>
        <script>

            //创建Vue实例
            let vm = new Vue({
                el: '#app',       //挂载，关联的视图层
                data: {            //vue 中的model  ->数据
                    message: '你好'
                }
            })

          </script>

2. 常用指令
   ①. v-model

   
   v-model.PNG

v-model-1.PNG

②. v-once
执行一次性地插值，当数据改变时，插值处的内容不会更新

 <p v-once>{{message}}</p>

②. v-if
条件渲染指令，根据表达式的真假来添加或删除元素。v-if="表达式"，其中“表达式”是一个返回bool值的表达式，返回 true或false。

v-if.PNG v-if-1.PNG

注意：v-if的值要是单个表达式（有个确定的值），不能是语句
③v-show
条件渲染指令，有v-show的元素始终会渲染在DOM中，根据表达式的真假来切换元素的display属性值，当条件去变化是该指令出发过渡效果

v-show.PNG v-show1.PNG

③v-else
v-else前面必须要有v-if或者v-else-if，要紧贴相连，否则报错。

            //正确
            <p v-if="msg2">{{msg2}}</p>
            <p v-else>{{msg2}}</p>

            //语法错误
            <p v-if="msg2">{{msg2}}</p>
            <p>{{msg1}}</p>
            <p v-else>{{msg2}}</p>

④v-else-if
⑤v-for
基于数据渲染一个列表，类似js的遍历，其遍历的数据类型可以是Array|Object|number|string。
该指令的值，必须使用特定的语法：（item，index）in items 或 item in items，v-for的优先级高于v-if之类的指令。

v-for.PNG v-for-1.PNG

v-for小练习

v-for练习.PNG v-for练习-1.PNG

⑥v-text和v-html

v-text和v-html.PNG v-text和v-html-1.PNG

⑦v-bind
动态地绑定一个或多个特性，或一个组件prop到表达式。
语法结构：v-bind:属性=“属性值”

绑定类名：
<div v-bind:class="className1"></div>
//也可以写成：
<div :class="className1"></div>

绑定属性：
<img :src = "srcLink">

绑定style：
<div :style="{color: colorName}">

绑定有属性的对象：
<div :style="{color: colorName}">

v-bind动态绑定练习：

v-bind.PNG v-bind-1.PNG

⑧v-on
动态绑定一个或多个特性，或一个组件prop到表达式，作用与v-bind类似。如果用在普通元素上，只能监听原生DOM事件，如果用在自定义的元素组件上，也可以监听子组件触发的自定义事件。

常用修饰符：

stop ---调用event.stopPropagation()：停止冒泡
prevent ---调用event.preventDefault()：停止监听原生事件/停止默认行为
capture ---添加事件侦听器时使用capture模式
self ---只当事件是从侦听器绑定的元素本身触发是才能触发回调
{keyCode| keyAlias} ---只当事件是从侦听器绑定的元素本身触发时才触发回调
once ---触发一次

使用手法：