什么是vue.js

Vue.js是目前最热门的前端框架，React是最热门的前端框架(React除了开发网站，还可以开发移动Apps，Vue语法也可以用于移动app开发，需要Weex)

Vue.js是前端主流框架之一，与Angular.js、React.js一起成为了前端三大主流框架！

Vue.js是一套构建用户界面的框架，* *只关注视图层* *，不仅易用，而且容易与第三方库或现有项目集成。(Vue有配套的第三方类库，可以集成开发大型项目)

Vue.js模板语法

1.插值表达式

最常见的数据绑定形式是使用{ { 0.}}(双括号)

div id=' app ' div { { message } }/div/div脚本newvue ({el:' # app '，data : { message 3360 ' h1vue/h1 ' })的第一次研究)/scriptv-html指令：用于输出html代码：

div id=' app ' div v-html=' message '/div/div script new vue({ El : ' # app '，data: {message3360' h1vue的第一次研究/h1 ' })/script v-text指令：用于输出文本

div id=' app ' div v-text=' message '/div/div script new vue({ El : ' # app '，data: {message3360' H1vue的第一次研究/h1 ' })/script 2，Vue.js的条件判断

如果条件判断指令

div id=' app ' p v-if=' seed '现在你已经看到我了/p模板v-if=' ok ' h1新手教程/h1 p不仅学会了技术，还做梦了！/p p哈哈哈，打字真难！/p/template/div script new vue({ El : ' # app '，data: { seen 3360 true，ok : true}})/script如果seed为true，则显示p标记。否则隐藏

注意：

1.v-show的用法与v-if相同。但是如果没有条件判断函数2，v-else和v-else-if可以为v-if设置一个else模块，而else-if模块3、v-else和v-else-if必须跟在v-if或v-else-if模块之后

3.Vue.js循环语法

v-for指令需要site形式的特殊语法，site是源数据数组，site是数组元素迭代的别名

1.迭代数组

div id=' app ' ol Li v-for=' site in sites ' { site . name } }/Li/ol/div脚本new Vue({ el: '#app '，data : { sites :[{ name : ' Runoob ' }，{name:' Google'}，{ name 3: '淘宝' } })/script 2。迭代对象中的属性

用户信息“{val}}-{{key}}-{{I}}/div中的Div v-for=' (val，key，I)，其中：[userinfo]是一个对象

3.迭代数

P v-for='i in 10 '这是第{{i}}个p标记/p

4.Vue.js的常用说明

v型斗篷：可以解决插值表达式闪烁的问题

V-bind:是vue提供的绑定属性的指令。可以缩写为：要绑定的指令。

输入类型=' button ' value=' button ' v-bind : title=' my title ' 123 ' ' script var VM=new vue({ El : ' # app '、Data: {mytitle: '这是自定义标题' }、methods : { show 3360 function(){ alert(' hello ')})/script v-model:v-bind只能实现数据的单向绑定。从m到v的自动绑定无法实现数据的双向绑定。v-model指令可以实现m中表单元素和数据的双向绑定。

注意：v-model命令只能在表单元素中使用。

div id='app' h4{{ msg }}/h4！-输入(广播、文本、地址、电子邮件.)选择复选框textarea -输入类型=' text ' style=' width :100%；'v-model=' msg '/div script//Create Vue实例，获取Viewmodel var VM=new Vue({ El : ' # app '，data: {msg: ')。大家都是好学生，爱打代码，爱学习，爱思考。“完美无瑕！”}，methods : { })；/脚本补充说明：前端MVVM和后端MVC的区别。

MVC:是后端分层开发的概念。

视图模型是前端视图层的概念。主要关注于视图层分离，也就是说：MVVM吧前端的视图层分为了三部分模型，视图，虚拟机视图模型

5、Vue.js事件处理器

v-on:事件监听可以使用绑定事件指令

div id='app '！-`问候'是在下面定义的方法名-按钮v-:点击='问候'问候/按钮/div脚本var app=new Vue({ el: '#app '，data: { name: 'Vue.js' }，//在`方法` s对象中定义方法methods: { greet:函数（事件){ //`这个`在方法里指当前某视频剪辑软件实例警报(“你好”这个.名字！)//`事件`是原生数字正射影像图事件if(event){ alert(event。目标。标记名)} } } })/脚本6，事件修饰符。停止阻止冒泡。预防阻止默认事件。捕获添加事件侦听器时使用事件捕获模式。自己只当事件在该元素本身（比如不是子元素)触发时触发回调。一次事件只触发一次

div id='app '！-使用。停止阻止冒泡-div class=' inner ' @ click=' div 1处理程序'输入类型='按钮'值='戳他@click.stop='btnHandler' /div！-使用。预防阻止默认行为- !-a href=' http://www .百度。com‘@点击。阻止='链接单击'有问题，先去百度/a -！-使用。捕获实现捕获触发事件的机制-div class=' inner ' @ click。捕获=“div 1处理程序”输入类型='按钮'值='戳他@click='btnHandler' /div -！-使用。自己实现只有点击当前元素时候，才会触发事件处理函数-div class=' inner ' @ click=' div 1处理程序'输入类型='按钮'值='戳他@click='btnHandler' /div！-使用。一次只触发一次事件处理函数- !-a href=' http://www .百度。com‘@点击。预防。一次='链接点击'有问题，先去百度/a -！-演示：停止和。自己的区别-div class=' outer ' @ click=' div 2 handler ' div class=' inner ' @ click=' div 1 handler '输入类型='按钮'值='戳他@点击。stop=' BTN汉德勒'/div/div！- .自己只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为-div class=' outer ' @ click=' div 2 handler ' div class=' inner ' @ click。self=' div 1处理程序'输入类型='按钮'值='戳他@ click=' BTN处理程序'/div/div/div脚本//创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app }，data: {}，methods : { Div 1 Handler(){ console。日志('这是触发了内部分区的点击事件)}，btnHandler() { console.log('这是触发了按钮按钮的点击事件)}，linkClick() { console.log('触发了连接的点击事件)}，div2Handler() { console.log('这是触发了外部分区的点击事件') } } });/script7，按键修饰符

:keyup :允许为绑定事件在监听键盘事件时添加按键修饰符

输入v-:键盘。输入='提交'

绑定一个回车按键时间

8、Vue.js样式的绑定

1、班级属性的绑定(v-bind :类)

风格。活动{宽度： 100像素高度： 100像素；背景：绿色；}/style div id=' app ' div v-bind : class=' { active : ISa active } '/div/div脚本new Vue({ El : ' # app '，data : { ISa active : true } })/脚本也可以：

div id=' app ' div v-bind : class=' active '/div/div

2、数组语法

即我们可以向v-bind :类传递一个数组

风格。活动{宽度： 100像素高度： 100像素；背景：绿色；} .文本-危险{ background:红色；}/style div id=' app ' div v-bind : class='[active class，errorClass]'/div /div脚本new Vue({ el: '#app '，data: { isActive: true，activeClass: ' active '，错误class : ' text-danger ' })/脚本同时在数组中我们也可以使用三元表达式：

div v-bind : class='[错误类，isActive？activeClass : '']'/div

3、Vue.js的内联样式(v-bind:style)

1、直接设置样式

div id=' app ' div v-bind : style=' { color : active color，fontsize 3360fontsize' px'} '测试内联样式/div /div

2.绑定样式对象

div id=' app ' div v-bind : style=' style object '测试绑定样式对象/div/div脚本newvue ({el:' # app '，data : { style object 3360 { color 3360 ' green '，fontsize:' 30px'})

div id=' app ' div v-bind : style='[基本样式，覆盖样式]'绑定多个样式对象/div/div脚本newvue ({el:' # app '，Data : {基本样式： {color :' green '，fontsize 3360' 30px'}，覆盖样式3360 { ' font-weight ' : ' bold ' } })/脚本摘要

以上是边肖介绍的vue的基本语法和常用说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！