web前端 -- vue -- vue简介及基础使用
根据千峰教育学习视频所练习的笔记 | 学习一段时间,我也有写一点东西的必要了···
1. vue简介
- 渐进式JavaScript框架:vue适合不同层次的开发人员,比如简单的数据交互,数据与视图的绑定操作,可以直接用vue操作。
- 完善的生态环境:vue router,vuex,Nuxt。
- 强大的组件化应用构建。
- 声明式渲染,所有的元素都是响应式的。
2.基础使用
建议参考vue中文官网
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165526968-1401361379.png)
2.1. 创建 vue 实例
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue基础使用</title>
<script src="../vue.js"></script>
<!--引入vue.js文件 在官网可以下载,跟之前.js下载差不多-->
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({ //创建vue实例
el:\'#app\' //el跟app进行交互
data: { //message 作为数据渲染的结果,
message:\'hello my-vue !\'
}
});
</script>
</body>
</html>
可以看到渲染完的结果:
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165556202-413565646.png)
2.2. 操作计算属性
<div id="app"> {{message}}<br>
{{messageReverse}}<br>
</div>
<script>
var vm = new Vue({
···
},
computed:{//2.计算属性
messageReverse:function () {
return this.message.split(\'\').reverse().join(\'\');
<!--字符串用空格分隔,reverse 将\'hello my-vue !\'反向输出,存在变量里-->
<!-- messageReverse变量,存储数组 -->
}
}
});
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165611921-1583604384.png)
2.3. 指令
- 继续在
<div>
里添加一个<input>
输入框:
<div id="app"> ···
<input type="text" v-model="message" >
</div>
就是这样了:
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165630403-1203733223.png)
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165648136-1914724257.png)
2.4. 事件处理器
- 接着在
<input>
里添加一个点击事件,对应的方法是changeBgColor,方法要写到methods里
<input type="text" v-model="message" v-on:click="changeBgColor"><!--
v-on:click="changeBgColor" 可以简写成 @click="changeBgColor"
v-bind:title="message" 可以简写成 :title="message"
-->
<script>
var vm = new Vue({
······
},
methods:{//4.事件
changeBgColor:function (ev) {
ev.target.style.background = \'pink\';
}
}
});
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165706842-1246252008.png)
- 再介绍两个有趣的事件:
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023171629722-783247490.png)
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165733648-1450908152.png)
2.5. 生命周期
- 创建一个实例从开始到销毁,过程中会添加很多回调函数,俗称钩子。当实例执行到相关的位置,就会执行这些钩子。
这里介绍两个:
<script> var vm = new Vue({
······
},
mounted:function () {
console.log(123);
}
});
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165758806-515363455.png)
意思是:浏览器弹出了123,就是说组件的el准备好了,可以挂载的时候就会触发mounted
同理,我们再写一个update,一旦有数据更新的时候就会触发:
<script> var vm = new Vue({
······
},
update:function () {
console.log(456);
}
});
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165812067-1717305484.png)
- 还有一些很有用的,比如说 watch:监听数据变化。
<script> var vm = new Vue({
······
},
watch:{
message:function (news, olds) {
console.log(news);
console.log(olds);
}
}
//message只要一变,就会触发这个回调
});
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191023165830090-84746862.png)
基本上我们就把vue的基础使用讲完了,一起加油练习哟~
以上是 web前端 -- vue -- vue简介及基础使用 的全部内容, 来源链接: utcz.com/z/375040.html