Vue下载地址:https://cn.vuejs.org/,有两个版本可以选择。
- Vue开发环境版本:包含了有帮助的命令行警告;
- Vue生产环境版本:优化了尺寸和速度。
Vue的安装方式(3种)
- 方式一:直接CDN引入
开发版本:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版本:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
- 方式二:下载和引入
开发版本:https://cn.vuejs.org/js/vue.js
生产版本:https://cn.vuejs.org/js/vue.min.js
- 方式三:NPM安装
Vue初体验
- Vue是一种声明式编程范式,与JQuery命令式编程范式不同
- 创建Vue对象(初始化),传入的参数也是对象类型
- let、const是ES6的语法。let定义变量,const定义常量。
- 在浏览器console中可以通过app.message访问或修改数据
<div id="app">{{message}}</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
message:'您好,Vue'
}
})
</script>
Vue通过数组列表显示
- v-for指令的使用
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
movies:['星球穿越','盗梦空间','人潮汹涌','你好,李银河']
}
})
</script>
- 数组可以通过使用movies.push('银河补习班')进行添加
小案例:计数器
- v-on监听事件
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button type="button" v-on:click="counter++">+</button>
<button type="button" v-on:click="counter--">-</button>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
counter:0
}
})
</script>
- Vue的methods属性,可以定义方法
- 方法中访问data中数据使用this
- HTML标签中使用data数据不用加{{}}
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button type="button" v-on:click="add">+</button>
<button type="button" v-on:click="sub">-</button>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
counter:0
},
methods:{
add:function(){
this.counter++
},
sub:function(){
this.counter--
}
}
})
</script>
- 语法糖:@click等同于v-on:click
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button type="button" @click="add">+</button>
<button type="button" @click="sub">-</button>
</div>
<script type="text/javascript">
const app=new Vue({
//el指定要挂载的元素
el:'#app',
data:{
counter:0
},
methods:{
add:function(){
this.counter++
},
sub:function(){
this.counter--
}
}
})
</script>
- 如果1.用于事件监听;2.方法没有参数,那么可以省略方法的括号(),如果不省略效果相同。但{{}}使用方法必须添加括号()
- 如果函数定义的有形参。调用方法时没有传递参数,但没有省略括号,那么形参的值为undefined;省略了括号那么会把览器默认生成的event以参数的形式传递给形参
- 如果需要event的同时又需要其它参数,则需要手动获取浏览器产生的event对象。方式为$event,代码如下:@click="abc(123,$event)"
v-on的修饰符
- stop 禁止事件冒泡
<body>
<div id="app">
<div @click="clickDiv">
<!-- v-on修饰符stop,防止事件冒泡 -->
<button type="button" @click.stop="clickBtn">修饰符</button>
</div>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
methods:{
clickBtn(){
console.log('点击了按钮')
},
clickDiv(){
console.log('触发了div点击事件')
}
}
})
</script>
</body>
- prevent 阻止默认行为(表单按钮提交场合)
<div id="app">
<form action="baidu" method="post">
<!-- prevent阻止了默认行为 -->
<input type="submit" value="提交" @click.prevent="submitClick"/>
</form>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
methods:{
submitClick(){
console.log('这是按钮自定义事件')
}
}
})
</script>
- once 只触发一次事件
- [keyAlias|keyCode] 监测键盘某一键是否敲击(上)
事件keyup和keydown分别代表键弹起和键按下。一般keyup使用的多
<div id="app">
<input type="text" @keyup.enter="clickKey" />
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
methods:{
clickKey(){
console.log('按下了回车键')
}
}
})
</script>
Vue的虚拟DOM机制
Vue在将接管的元素渲染到页面前会要经过虚拟DOM环节,出于性能考虑,虚拟DOM会尽可能复用已经存在的元素,而不是重新创建新的元素。
对于重用的元素会根据属性的不同进行修改后渲染,但用户输入的内容不会清空,可以给元素增加key属性,key属性不同在虚拟DOM中就不会进行复用。