Vue下载地址:https://github.com/vuejs/vue(下载解压,在dist 可得到vue.js文件)
直接使用公共的CDN:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue 是一套用于构建用户界面的渐进式框架(可以选择性的使用该框架的一个或一些组件,这些组件的使用也不需要将框架全部组件都应用;而且用了这些组件也不要求你的系统全部都使用该框架)。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue使用MVVM模式
M:即Model,模型,包括数据和一些基本操作
V:即View,视图,页面渲染结果
VM:即View-Model,模型与视图间的双向操作
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:只要Model发生了改变,View上自然就会表现出来,当用户修改了View,Model中的数据也会跟着改变,把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
vue渲染:
<!DOCTYPE html>
<head>
<title>vue渲染测试</title>
</head>
<body>
<div id="app"> <h2>插值表达式:{{name}}</h2> </div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//vue初始化
var app = new Vue({
el:"#app",//el即element,要渲染的页面元素
data: {
name:"vue渲染"
}
});
</script>
</body>
</html>
钩子函数:
<div id="app"> {{msg}} </div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ msg: "" },
//钩子函数
created() {
//这里的this表示vue实例
console.log(this);
this.msg = "hello vue. created.";
}
})
</script>
钩子函数created()效果:
v-text、v-html:
<div id="app">
v-text: <span v-text="msg"></span><br>
v-html: <span v-html="msg"></span><br>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
msg:"<h2>hello, vue.</h2>"
}
});
</script>
v-text、v-html效果:(v-text输出文本、v-html输出会被渲染)
v-model双向绑定:
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">C++<br>
<h2>
你选择了: {{language.join(",")}}
</h2>
</div>
<!--多个checkbox对应一个model时,model的类型是数组,单个checkbox是boolean类型
radio对应的值是input的value值
input 和 textarea 默认对应的model是字符串
select 单选对应字符串,多选对应也是数组-->
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
language:[]
}
});
</script>
v-model效果:(input选择改变,h2的值会跟着改变,反之同理)
v-on绑定事件:(可简写为@)
<div id="app">
<button v-on:click="num++">增加</button>
<button @click="decrement">减少</button>
<h2> {{num}} </h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
num:"1",
},
methods:{
//递减
decrement () {
this.num--;
}
}
});
</script>
为了方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示:
.stop :阻止事件冒泡,调用 event.stopPropagation()
.prevent :阻止默认事件发生,调用 event.preventDefault()
.capture :使用事件捕获模式
.self :只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
.once :只触发一次回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
.left - 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器
例:
<!-- 停止冒泡 --><button @click.stop="doThis"></button>
<!-- 阻止默认行为 --><button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 --><form @submit.prevent></form>
<!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 --><input @keyup.enter="onEnter" />
<!-- 点击回调只会触发一次 --><button @click.once="doThis"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
v-for:
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in person">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[
{"name":"银灰","age":13,"gender":"男"},
{"name":"能天使","age":13,"gender":"女"},
{"name":"艾雅法拉","age":4,"gender":"女"}
],
person:{"name":"史尔特尔","age":13,"gender":"女","address":"罗德岛"}
}
});
</script>
v-for效果:
v-for语法:
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-else-if、v-else:
<div id="app">
<ul v-for="(user, index) in users" :key="index" >
<li v-if="user.gender=='女'" style="background-color: deeppink; color: white">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<li v-else-if="user.gender=='男'" style="background-color: blue; color: white">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<li v-else>
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show: true,
users:[
{"name":"银灰","age":13,"gender":"男"},
{"name":"能天使","age":13,"gender":"女"},
{"name":"艾雅法拉","age":4,"gender":"女"},
{"name":"塞雷亚","age":16,"gender":""}
]
}
});
</script>
v-if、v-else-if、v-else效果:
v-show:(显示隐藏)
<div id="app">
<button @click="show=!show">点我</button>
<h2 v-show="show">
你好;v-show!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show: true,
}
});
</script>
v-bind:(对元素的任何属性设置vue实例的数据,可简写为”:”)
<style type="text/css">
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
<div id="app" style="width: 100px; height: 100px; color: white;">
<button @click="bool=!bool">点我改变下面色块的颜色</button>
<div :class="{red:bool, blue:!bool}">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
color:"red",
bool:true
}
});
</script>
计算属性computed:
<h2>
computed计算方式;你的生日为:{{birth}}
</h2>
<script>
var app = new Vue({
el:"#app",
data: { birthday:1429032123201 },
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
}
}
});
</script>
监控watch:
<div id="app">
<input type="text" v-model="message">
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"abc",
},
watch:{
message(newValue, oldValue){
console.log("新值:" + newValue + ";旧值:" + oldValue);
},
}
});
</script>
watch效果: