Vue笔记（1）

条件渲染：

1.v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。
你可以使用 v-else 指令来表示 v-if 的“else 块”
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
2.v-show 指令：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
3.v-if和v-show的区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--条件渲染-->
    <h1 v-if = "titleName">你可以看见我了</h1>
    <h1 v-else>你看到else了</h1>
    <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>

    <h1 v-show="ok">Hello!</h1>


</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            src: "上海",
            titleName: false,
            type: "A",
            ok: true
        }
    })


</script>

</body>
</html>

列表渲染：

1.我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 还支持一个可选的第二个参数，即当前项的索引。v-for="(item, index) in items。
2.也可以用 v-for 来遍历一个对象的属性。你也可以提供第二个的参数为 property 名称 (也就是键名)。
3.Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
4.由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)
5.Vue 不能检测对象属性的添加或删除，对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
6.v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
7.任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--列表渲染-->
    <ul>
        <li v-for="(item, index) in items">
            {{ index }}-{{ item.message }}
        </li>
    </ul>

    <ul >
        <li v-for="(value, name)  in object">
            {{ name }}: {{ value }}
        </li>
    </ul>
    <span v-for="n in 10">{{ n }} </span>

    <div >
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input
                    v-model="newTodoText"
                    id="new-todo"
                    placeholder="E.g. Feed the cat"
            >
            <button>Add</button>
        </form>
        <ul>
            <li
                    is="todo-item"
                    v-for="(todo, index) in todos"
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>

</div>
<script>
    Vue.component('todo-item', {
        template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
        props: ['title']
    })
    var vm = new Vue({
        el:"#app",
        data:{
            items: [
                { message: '星期一' },
                { message: '星期二' }
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                },
                {
                    id: 2,
                    title: 'Take out the trash',
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                }
            ],
            nextTodoId: 4

        },
        methods: {
            addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }

    })


</script>

</body>
</html>

事件处理：

1.可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
2.然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--JavaScript 代码写在v-on指令中-->
    <div >
        <button v-on:click="counter += 1">Add 1</button>
        <p>The button above has been clicked {{ counter }} times.</p>
    </div>

    <!-- 将方法名写在v-on指令中 -->
    <div>
        <button v-on:click="greet">Greet</button>
    </div>

    <!--在内联 JavaScript 语句中调用方法-->
    <div>
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
    </div>

</div>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            counter:0,
            name:"World"

        },
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            },
            say: function (message) {
                alert(message)
            }
        }

    })


</script>

</body>
</html>

class与style绑定：

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{'text-success' : true }">圣诞快乐</div>

也可以使用v-bind:style绑定内联样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

或者使用v-bind:style直接绑定到一个样式对象

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

表单输入绑定：

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上。
修饰符：
.lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加
.number：将用户输入的值转成数值类型。
.trim：自动过滤用户输入的首尾空白字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--输入绑定-->
    <!--文本-->
    <input v-model="message" placeholder="请输入">
    <p> Input message is {{message}}</p>

    <!--多行文本-->
    <textarea v-model="textareaMessage" placeholder="请输入"></textarea>
    <p>Textarea message is {{textareaMessage}}</p>

    <!--单个复选框-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>

    <!--多个复选框-->
    <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>
    <br>
    <br>

    <!--单选按钮-->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
    <br>
    <br>

    <!--选择框 单选-->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <br>
    <br>

    <!--选择框 多选-->
    <select v-model="selectedList" multiple style="width: 50px;">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selectedList }}</span>
    <br>

    <!--值绑定-->
    <input type="radio" v-model="pick" v-bind:value="a">
    <span>Picked: {{ pick }}</span>
    <br>

    <!--修饰符：lazy-->
    <input v-model.lazy="lazyMessage" placeholder="请输入">
    <p> Input message is {{lazyMessage}}</p>

    <!--修饰符：number-->
    <input v-model.number="age" type="number" placeholder="请输入年龄">
    <p> Input age is {{age}}</p>

    <!--修饰符：trim-->
    <input v-model.trim="trimMessage" placeholder="请输入" >
    <p> Input message is {{trimMessage}}</p>



</div>

</div>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            message:"",
            textareaMessage:"",
            checked:false,
            checkedNames:[],
            picked:"",
            selected:"",
            selectedList:[],
            toggle:false,
            pick:"",
            a:"test",
            age:0,
            trimMessage:"",
            lazyMessage:""

        },
        methods: {
            addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }

    })


</script>

</body>
</html>

参考：
https://cn.vuejs.org/v2/guide/conditional.html
vue修饰符：
https://segmentfault.com/a/1190000016786254
<label> 定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组
https://blog.csdn.net/qq_34268861/article/details/80241784