vue base (一)

1.在html文件中使用:

引入vue.js

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

body部分

<div id='app'>{{ message }}</div>

script部分

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }

2.指令

循环：v-for 必须有个key值

条件渲染：

v-if 是通过控制DOM节点的渲染来实现，不能和v-for一起使用，v-for的优先级高于v-if,不可用于template

v-show 是通过控制元素的display属性

事件处理：

v-on 绑定事件（如click，input，mousedown等），还有一些事件修饰符（stop,native,once,prevent等）

双向绑定：v-model 修饰符（lazy,number,trim）

3.计算属性和监听属性(watch,computed)

只需要计算的简单操作时，使用computed

需要监听某个属性的变化时，使用watch

4.使用多个class和style

<div v-bind:class="[activeClass, errorClass]"></div>

<div v-bind:style="[activeStyle, errorStyle]"></div>