Vue入门-初识与数据绑定

一、Vue介绍
vue是MVVM的框架, model, view, viewmodel, 由viewmodel控制所有逻辑的实现,实现把model渲染到view上,实现model和view高度分离,解耦.(model模型, view视图)
二、Vue开发

  • A.通过script引入Vue文件,进行开发(较少使用)
  • B.通过Vue-cli(即Vue脚手架,或命令行工具,类似于angular-cli)搭建项目,该方式是项目中的主流方式.

三、常见问题:什么是文本闪烁?
当使用文件引入的方式进行开发,由于网络问题,Vue还没有加载完成,{{}}写在了标签内部,导致{{}}没有正常解读,导致作为普通文本显示出来.
解决文本闪烁的问题方法:

  • 方法一.把vue.js引入放在head中.
  • 方法二.使用v-clock指令,专门解决文本闪烁问题,使用{{}},可以加上v-cloak指令,当Vue没有加载成功,v-cloak就是了一个普通的标签属性,通过属性选择器加载样式,当Vue加载成功时,就会识别v-cloak标签,就把那个隐藏样式去掉.

四、数据绑定

1.1值绑定
A.{{}},插值表达式;可以放置变量、变量表达式、函数调用;注意:不要写多行语句;
B.使用v-html/v-text进行值绑定;
注意:v-text不能识别标签,而v-html可以识别标签;
1.2属性绑定
A.在Vue中,没有HTML属性与DOM属性的细分,
B.在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind,如colspan属性;
语法: v-bind:属性名="变量名/表达式",可以简写为: :属性名="变量名/表达式"
1.3.动态绑定CSS样式
1.动态改变class
2.通过style,动态改变内联样式
共同点:都支持对象和数组的值
1.4事件绑定
语法:v-on:事件名="执行函数", 注意:执行函数后面可以加也可以不加,需要传入参数的时候加小括号
简写:@事件名
1.5.Vue事件修饰符
1.普通事件
stop:阻止事件冒泡
prevent:阻止该事件的默认操作
once:一次性事件
2.键盘事件
.enter, .tab, .left, .right, .up, .down, .meta, .ctrl, .shift, .alt, .delete, .esc;
.enter.alt表示enter键与alt键同时按下
1.6双向数据绑定
结合双向数据绑定的标签有input,textarea等

v-model

1.7修饰符:
1..lazy表示将input事件转换为change事件
2..trim:去除内容前后空格,中间的空格不可以消除

3..number:转换为number类型

五、学习代码:(全部复制,即可参考学习)





    
    vue基础
    



    

值绑定一:插值表达式

{{}},插值表达式;可以放置变量、变量表达式、函数调用;

注意:不要写多行语句

变量:{{description}}

表达式:{{5+3}}

三目运算:{{isMan?'男人':'女人'}}

值绑定二:v-html/v-text

使用v-html/v-text进行值绑定

注意:v-text不能识别标签,而v-html可以识别标签

属性绑定一:v-bind

注意:如果src属性值为字符串,则需要添加单引号;直接写在双引号中的,会默认为变量;

在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind,如colspan属性;

单元格 111

属性绑定二:class

A :class后面跟对象
B :class后面跟数组

属性绑定三:style

A :style后面跟对象

B :style后面跟数组

事件绑定一

移入移出事件

事件绑定二

结合属性绑定与事件绑定控制标签的显示与隐藏;

事件修饰符:普通事件

stop:阻止事件冒泡;prevent:阻止该事件的默认操作;once:一次性事件;

事件修饰符:键盘事件

注意:需要同时按下enter与alt键才可以触发绑定的事件;

双向数据绑定一

输入框的内容为:{{msg}}

双向数据绑定二

vue使用v-model实现数据绑定;

输入框的内容为:{{msg2}}

双向数据绑定三

结合v-model使用的修饰符

1..lazy表示将input事件转换为change事件;

2..trim:去除内容前后空格,中间的空格不可以消除;

{{msg3}}

初始化视图模型

el:该视图模型挂载到哪个节点上,只有在该节点中,才能使用该视图模型的属性和方法;

data:里面存放所有的变量,在页面中显示的变量,都要在data中进行声明或者赋值;

methods:存储所有在该视图模型中用到的方法;

六、效果图

Vue入门-初识与数据绑定_第1张图片

你可能感兴趣的:(Vue)