Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
简单的html结构,id是app
<div id="app">
{{msg}}
</div>
声明Vue对象
引入了vue.js,Vue会被注册为一个全局变量。在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
new Vue({
el: "#app",
data: {
msg: "helloWorld,helloVue!"
}
})
el:Vue需要操作的元素节点
data属性:每个 Vue 实例都会代理其 data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $;
现在数据和 DOM 已经被绑定在一起,所有的元素都是响应式的。在浏览器控制台修改app.msg,页面会相应更新。
Vue常用指令介绍
指令带有前缀 v-,表示它就是vue的属性
1、v-text (更新元素的文本内容)
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
2、v-html (更新元素的innerHTML)
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
<div v-html="html"></div>
3、v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用
4、v-bind(动态地绑定一个或多个特性)
有缩写,缩写是一个冒号 :
<div id="app">
<img :src="pic">
</div>
new Vue({
el:"#app",
data:{
pic:"img/消息.png"
}
})
5、v-on
就是监听 DOM 事件来触发一些 JavaScript 代码。
表达式可以是一个方法的名字或一个内联语句,这个内联跟样式的内联一样,就是直接在DOM元素上写逻辑,如下:
<button type="button" v-on:click = "num += 1">点击增加1</button>
这个也是有缩写的 缩写就是@
<button @click="show(1)">点我啊</button>
在 methods
对象中定义方法
new Vue({
el:"#app",
data:{
},
methods:{
show(a){
alert("你好啊小朋友"+a);
}
}
})
6、v-if (通过真假值的判断对dom元素进行渲染)
<a @click="flag = true">新闻</a>
<a @click="flag = false">电影</a>
<hr>
<div v-if="flag">
<h1>新闻</h1>
</div>
<div v-else>
<h1>电影</h1>
</div>
当然,有if肯定就有else
查了一下官方的文档,v-if和v-show的区别:
v-if:是真实的条件渲染,切换时销毁和重建,第一次如果判断条件为假,是什么都不做的,官方称为懒惰性。
v-show:元素始终被编译并保留,只是简单地基于 CSS 切换
总结一下, v-if有更高的切换消耗而 v-show有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show较好,如果在运行时条件不大可能改变则使用 v-if较好。
7、v-for
也就是遍历数组里面的所有元素,和js中的foreach、jQ中的each差不多
-
<h1>
{{i}}:{{u.name}}
</h1>
-
<h2>爱好</h2>
- {{t}}:{{h}}
</li> </ul> new Vue({ el:"#app", data:{ user:[ { name:"老王", hobby:["吃饭","睡觉"] }, { name:"小王", hobby:["唱","跳"] } ] } })
v-for,可以遍历数组,对象,甚至是整数(可以当做循环的次数来用),其中遍历的参数可以是value,index,如果是对象还有key。
8、v-model(表单元素的双向绑定)div id="app"> <h1>用户注册</h1> 用户名:<input type="text" v-model="form.username"> 密码:<input type="password" v-model="form.pwd"> <hr> <button @click="show()">点我啊</button> {{form}} </div> new Vue({ el:"#app", data:{ form:{ username:"", pwd:"" } },
基本指令就写到这。