VUE笔记

<div id="app">
        {{message}}
</div>
<div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
</div>
<div id="app-3">
        {{message}}
        <h3>{{school.name}} {{school.mobile}}</h3>
        <ul>
            <li>{{address[0]}}</li>
            <li>{{address[1]}}</li>
        </ul>
</div>

v-text指令

作用： 把数据设置给标签的文本值 默认写法会替换全部的内容
使用差值表达式{{}}可以替换指定内容 内部也支持写表达式
内部连接只能使用’’

<div id="app-4">
    <h2>{{message}}</h2>
    <h2 v-text="message">pink</h2>
    <h2 v-text="message+'!'"></h2>
    <h2 v-text="info"> </h2>
</div>

v-html指令

作用：设置元素的innerHTML
当变量只有文本时和v-text没有差异
如果内容为html结构 会被解析为标签 则会显示解析后的结果

<div id="app-5">
    <p v-html="message"> </p>
    <p v-text="message"> </p>
</div>

v-on指令

作用：为元素绑定事件 e.g.:onclick
v-on可简写为@

 <div id="app-6">
        <input type="button" value="鼠标点击事件绑定" v-on:click="method1"><!-- 鼠标点击事件 -->
        <input type="button" value="v-on简写 @=v-on" @click="method1"><!-- 鼠标点击事件 -->
        <input type="button" value="鼠标移动事件绑定" v-on:mouseenter="method2"><!-- 鼠标移动事件 -->
        <input type="button" value="双击事件绑定" v-on:dbclick="method2"><!-- 双击事件 -->
        <h2 @click="changefood">{{food}}</h2>
    </div>

v-show指令

作用：根据表达值的真假，切换元素的显示和隐藏（操纵样式）
用于根据条件展示元素的选项是 v-show 指令
本质是切换元素的display

  <div id="app-7">
        <button @click="changeisShow">显示/隐藏</button>
        <img src="jisoo.jpg" v-show="isShow">
        <img src="kimjisoo.jpg" v-show="age>=18">
    </div>

与 v-if 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 ## v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

v-if指令 ：条件渲染

作用：根据表达式的真假切换元素的显示和隐藏（操纵dom元素） -->

<div id="app-8">
    <button @click="togisShow">切换显示</button>
    <p v-if="true">啊啊啊啊</p>
    <!-- 为false时代码中直接删除元素了 -->
    <p v-if="isShow">噢噢噢噢</p>
</div>

因此频繁切换的元素用v-show反之用v-if
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

v-bind指令：Class 与 Style 绑定

作用：设置元素的属性（比如：src,title,class )

<div id="app-9">
    <img v-bind:src="imgSrc">
    <!-- v-bind可省略 -->
    <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="togActive">
</div>

v-for指令：列表渲染

作用：根据数据生成列表结构
使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 还支持一个可选的第二个参数，即当前项的索引序列。

可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

也可以用v-for遍历对象的属性item in object
也可以提供第二个的参数为 property 名称 (也就是键名)：{{ name }}: {{ value }}
还可以用第三个参数作为索引：(value, name, index) in object {{ index }}. {{ name }}: {{ value }}

<div id="app-10">
        <ul>
            <li v-for="item in arr">blackpink:{{item}}</li><br>
            <li v-for="item of arr">blackpink:{{item}}</li><br>
            <li v-for="(item,index) in arr">{{index+1}}.blackpink:{{item}}</li><br>
            <li v-for="value in object ">{{value}}</li>
            <div v-for="(value, name, index) in object">
                {{ index }}. {{ name }}: {{ value }}
              </div>
        </ul>
        <h3 v-for="item in veg" :title="item.name">{{item.name}}</h3>
    </div>

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push():可向数组的末尾添加一个或多个元素，并返回新的长度。
• pop() :将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值
• shift() ：用于把数组的第一个元素从其中删除，并返回第一个元素的值。
• unshift() :向数组的开头添加一个或更多元素，并返回新的长度。
• splice() ：向/从数组中添加/删除项目，然后返回被删除的项目。
• sort() ：用于对数组的元素进行排序。
  如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
  如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  若 a 等于 b，则返回 0。
  若 a 大于 b，则返回一个大于 0 的值。
• reverse()：用于颠倒数组中元素的顺序。该方法会改变原来的数组，而不会创建新的数组。

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如

• filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  filter() 不会对空数组进行检测。
  filter() 不会改变原始数组。
  e.g.

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:

32,33,40`

• concat() ：用于连接两个或多个数组。
  该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var a = [1,2,3];
document.write(a.concat(4,5));

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

输出为：
1,2,3,4,5
George,John,Thomas,James,Adrew,Martin

• slice()：可从已有的数组中返回选定的元素。并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.slice()
  它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

  v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用

v-on指令:事件处理

作用：传递自定义参数，事件修饰符

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。 ## 按键修饰符

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

鼠标按钮修饰符

• .left
• .right
• .middle
  这些修饰符会限制处理函数仅响应特定的鼠标按钮。

v-modle指令：表单输入绑定

作用： 用在表单 、 及 元素上创建双向数据绑定。
获取和设置表单元素的值
同步更新message的值
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<div id="app-12">
        <input type="text" v-model = "message" @keyup.enter="getM">
        <input type="button" @click = "setM" value="修改">
        <h2>{{message}}</h2>
    </div>
    <div id="app-13">
        <ol>
            
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

修饰符

• .lazy

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

• .number
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

v-once 指令

作用:执行一次性地插值，
当数据改变时，插值处的内容不会更新
会影响到该节点上的其它数据绑定

el：“元素名”（一般使用id选择器）

el命中的元素内部可以被vue所管理
只能支持双标签（body，html除外

data:数据对象

Vue中用到的数据我们定义再data中
data中可以写复杂的数据
渲染复杂类型的数据时，遵守js的语法即可

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                message: "Nihap "
            }
        })
        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
        var app3 = new Vue({
            el: '#app-3',
            data: {
                message: "你好呀",
                school: {
                    name: "jisoo",
                    mobile: "111-111-111"
                },
                address: ["中国", "韩国"]
            }
        })
        /* VUE指令 */
        /* 内容绑定，事件绑定 */
        var appp4 = new Vue({
            el: '#app-4',
            data: {
                message: "kimjisoo",
                info: "black"
            }
        })
        var app5 = new Vue({
            el: '#app-5',
            data: {
                message: "<a href='#'>pink</a>"
            }
        })
        var app6 = new Vue({
            el: '#app-6',
            data: {
                food: "potato"
            },
            methods: {
                method1: function () {
                    alert("金智秀")
                },
                method2: function () {
                    alert(this.food)
                },
                changefood: function () {
                    this.food += "yummy！"
                }

            }
        })

        var app7 = new Vue({
            el: '#app-7',
            data: {
                isShow: false,
                age: 19
            },
            methods: {
                changeisShow: function () {
                    this.isShow = !this.isShow
                }
            }
        })

        var app8 = new Vue({
            el: '#app-8',
            data: {
                isShow: false
            },
            methods: {
                togisShow: function () {
                    this.isShow = !this.isShow
                }
            }
        })

        var app9 = new Vue({
            el: '#app-9',
            data: {
                imgSrc: "jisoo.jpg",
                imgTitle: "金智秀",
                isActive: false
            },
            methods:{
                togActive:function(){
                    this.isActive != this.isActive;
                }
            }
        })

        var app10 = new Vue({
            el: '#app-10',
            data: {
                arr: ["jisoo", "jennie", "rose", "lisa"],
                veg: [{ name: "tomato" }, { name: "potato" }],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                }
            }
        })
        var app11 = new Vue({
            el:'#app-11',
            methods:{
                doIt:function(){

                }
            }
        })
        /* 显示切换，属性绑定 */
        /* 列表循环，表单元素绑定 */
        var app12 = new Vue({
            el:'#app-12',
            data:{
                message:"kim"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message = "jisoo"
                }
            }
        })

        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })

        var app13 = new Vue({
            el: '#app-13',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            }
        })
    </script>
</body>

</html>