什么是Vue?
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。
库和框架的区别
库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
安装Vue
cdn下载(需连接网络)BootCDN中文网
<!- - 开发环境版本,包含了有帮助的命令行警告 - - >
< script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js” >< /script >
< !-- 生产环境版本,优化了尺寸和速度 -->
< script src=“https://cdn.jsdelivr.net/npm/vue”>< /script>
手动下载
< !-- 开发环境版本,包含了有帮助的命令行警告 -->
< script src=“dist/vue.js”>< /script>
< !-- 生产环境版本,优化了尺寸和速度 -->
< script src=“dist/vue.min.js”>< /script>
入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门案例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
//注意:边界不能有兄弟标签,边界一定是跟标签
new Vue({
el:'#app',
data:{
msg:'hello vue!!!'
}
})
</script>
</html>
事件(v-on事件绑定)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<button v-on:click="xx">vue的事件按钮</button>
<button @click="xx">vue的事件按钮简写</button>
<!-- v-on代表的是Vue指令,:后面代表的是参数 -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
//es6之前的写法
// data:{
// msg:'hello vue!!!'
// },
// data:function(){
// return {
// msg:'hello vue2!!!'
// }
// },
data(){
return {
msg:'hello vue!!!'
}
},
methods:{
xx(){
console.log('xx方法被调用');
this.msg = 'hhhhhhh';
}
}
})
</script>
</html>
点击事件按钮之后
双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue双向数据绑定</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<h3>{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
//注意:边界不能有兄弟标签,边界一定是跟标签
new Vue({
el:'#app',
data:{
msg:'hello vue!!!'
},
created(){
this.msg= 'xxx';
}
})
</script>
</html>
当修改文本框内容时,h3标签内容同步修改,同理,h3内容改变,文本框内容也会同步修改
Vue生命周期
总结
今天的分享就到这里了,希望可以给大家一点帮助!!!!