vue入门
VUE入门
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- name：这里我们指定了一个name属性
- 页面中的
h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
- el
- data
- methods
vue钩子函数
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：该函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
指令
插值表达式
花括号的方式渲染, 会有插值闪烁
<body>
<div id="app">
<h2>{{name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "张三"
}
});
</script>
可以使用v-text和v-html指令来替代{{}}
<div id="app">
v-text:<span v-text="hello"></span> <br/>
v-html:<span v-html="hello"></span>
</div>
双向绑定
通过v-model 和name绑定
v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
<body>
<div id="app">
<input type="text" v-model="name">
<h2>
{{name}}
</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app", // el即element，该vue实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三"
}
});
</script>
事件处理
事件修饰符
.stop：阻止事件冒泡到父元素.prevent：阻止默认事件发生*.capture：使用事件捕获模式.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）.once：只执行一次
如阻止默认事件:
@contextmenu.prevent="func()"
@click
点击事件绑定
@click='add'
按键修饰符, 监听键盘输入
.enter*.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
<input @keyup.enter="submit">
组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift
例如：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
V-For 循环
<li v-for="user in users">
{{user.name}} - {{user.gender}} - {{user.age}}
</li>
获取数组下标
v-for="(item,index) in items"
对象遍历
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时，得到的是对象的属性值
- 2个参数时，第一个是属性值，第二个是属性名
- 3个参数时，第三个是索引，从0开始
V-If和V-Show
v-if条件判断。当得到结果为true时，所在的元素才会被渲染。显示或者隐藏是通过创建和销毁实现
v-else-if
v-else写在 if后面
v-show 元素仍然存在只是控制了显示,隐藏
<h1 v-if="show">
看到我啦？！
</h1>
<h1 v-else>
看到我啦？！else
</h1>
<h1 v-show="show">
看到我啦？！show
</h1>
V-Bind
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
<div id="app">
<div v-bind:class="activeClass"></div>
<div :class="errorClass"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
activeClass: 'active',
errorClass: ['text-danger', 'text-error']
}
})
</script>
数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<div :style="[baseStyles, overridingStyles]"></div>
数据：
data: {
baseStyles: {'background-color': 'red'},
overridingStyles: {border: '1px solid black'}
}
计算属性 computed
<div id="app">
<h1>您的生日是：{{birth}} </h1>
</div>
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
Watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>
浙公网安备 33010602011771号