最近正好学习了vue.js就准备将此记录下来，希望能给各位做个参考，当然因为技术有限所以出现很多错误，烦请大佬们能够不吝赐教，此篇博客会一直保持更新，以后关于vue就在本篇博文上填加内容了。
VueJs简单入门
1.1、vuejs概述
Vue.js是一个渐进式框架(主张少：调用多少算多少，没有赠品)
1.2 mvvm模式
mvc的改进版，主要目的是分离视图(View)和模型(Model)
1.3 vuejs快速入门
html>
Title{{message}}
new Vue({
el:"#app",//表示当前vue接管div区域
data:{
message:'Hello World'//结尾不写分号
}
})
主要分为两部分，一部分网页内容使用插值表达式{{}}将要显示的内容变量名圈起来，一部分定义vue，el是不可或缺的，代表需要圈起来给vue管理的区域，另外的内容后面实例中慢慢述说。
2、常用系统指令(加入和普通js的对比)
v-on 简写’@ ‘ 可以用 v-on 指令监听 DOM 事件，例如：v-on:click
v-text 与 v-html 对应js的innerText和innerHTML
v-bind 简写’:’ 属性修饰
v-model 获取对象的属性 如：student.name
v-for 循环
v-if 与 v-show v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
2.1.1 v-on:click
js实现代码：
hello
点击改变
function change() {
document.getElementById("app").innerText="你好"
}
*vue实现代码 ： *
{{message}}
点击改变
new Vue({
el:"#app",
data:{
message:'hello'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
})
主要做了一个带参的方法，方法内部其实和普通方法一样的，随意定义逻辑就好。
2.1.2 v-on:keydown
*js实现代码： *
//view model
function showKeyCode() {
var keyCode=event.keyCode;
if (keyCode 57) {
//不让键盘的按键起作用
event.preventDefault();
}
if (keyCode == 13) {
alert("你按的是回车")
}
}
vue实现代码：
//view model
new Vue({
el:"#app",
methods:{
/* $event 是vue中的事件对象，和我们传统js的event对象是一样的 */
fun:function (event) {
if (keyCode 57) {
//不让键盘的按键起作用
event.preventDefault();
}
}
}
});
}
本实例主要做了输入框内只能输入数字的方法，输入其他键盘自动不起作用。具体event事件后面会有叙述。
2.1.3 v-on:mouseover
js实现代码：
这是一个文件域
//view model
function divmouseover() {
alert("鼠标移动到div上");
}
function textareamouseover() {
alert("鼠标移动到了text上")
event.stopPropagation(); //阻止传递事件，即鼠标移动到文本域中，触发文本 域的事件，但是不触发他的父标签的方法。
}
//css自己添加到合适位置
#div {
background-color: red;
}
vue实现代码：
这是一个文件域
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标停在div上")
},
fun2:function (event) {
alert("鼠标停在text上");
event.stopPropagation();
}
}
});
经过三个常用实例，应该可以了解到v-on的使用方法了吧，举一反三，这可是举三岂不是全部精通了。
2.1.4 按键修饰符(常用按键在v-on的别名)
全部的按键别名：
.enter 回车
.tab tab
.delete 删除和退格
.esc esc
.space 空格
.up 方向上
.down 方向下
.left 方向左
.right 方向右
.ctrl ctrl
.alt alt
.shift shift
.meta 很多键盘没有的键
随便举个按键例子吧_回车键
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("你按了回车键")
}
}
})
2.2 v-text与v-html
这边就不对比了，v-text相当于jq的text()，v-html相当于jq的html()，很简单的。一个会解析标签，一个原样输出这就不用说了吧。
new Vue({
el:'#app',
data:{
message:"
hello
"}
})
2.3 v-bind
{{message}}
{{message2}}
new Vue({
el:"#app",
data:{
message:"第一个font",
message2:"第二个font",
ys1:"red",
ys2:"blue",
}
});
2.4 v-model 获取对象属性
姓名：
new Vue({
el:"#app",
data:{
user:{username:"",password:""}
},
methods:{
fun:function () {
this.user.username="alex";
}
}
})
2.5 v-for
操作array
- {{item}}
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
操作对象 (很奇怪的一点是key不是最先获取到的，value才是，尚未理解)
- {{key}}=={{value}}
new Vue({
el:"#app",
data:{
product:{id:1,name:"电脑",price:100}
}
})
操作对象数组
| 序号 | 名称 | 价格 |
{{p.id}} | {{p.name}} | {{p.price}} |
new Vue({
el:"#app",
data:{
products:[
{id:1,name:"张三",price:500},
{id:2,name:"李四",price:200},
{id:3,name:"王五",price:100}
]
}
})
2.6 v-if 与 v-show(真没看出来有什么差别)
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
百度
阿里
切换
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function () {
this.flag=!this.flag;
}
}
})
3 生命周期(了解)
先放上一张官方图片，对应的内容仔细看还是挺简单的，当然如果后期用到，深入理解会很难的，不过我们还是来简单的了解一下就好了。后面放上一张运行时的控制台输出内容，以及运行的代码，代码都是只包含body以及script所以引用js这些请自己进行。
我们可以看到在创建前状态只进行了new vue和生命周期初始化和事件初始化，当前元素和数据都没有值，创建完毕状态就可以看出，vue是先有数据然后在寻找挂载点，这就很好解释了为什么要先new vue然后再在界面中使用插值符{{}}，(原先自己都是先插值)然后再new vue,之后就是挂载过程了，介于知识有限，所以以后使用过程中再详细解释，只需要知道几个阶段：创建前->创建后->挂载前->挂在后->[更新数据前后(可选)]->销毁前->销毁后
{{message}}
new Vue({
el: "#app",
data: {
message: "Vue生命周期"
},
beforeCreate: function () {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
作者：夕花思影
原文：https://blog.youkuaiyun.com/liyunfu233/article/details/91885064
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
