详解Vue中的基本语法和常用指令


Posted in Javascript onJuly 23, 2019

什么是vue.js

Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)

Vue.js 是前端的**主流框架之一**,和Angular.js、React.js 一起,并成为前端三大主流框架!

Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

Vue.js模本语法

1、插值表达式

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值

<div id="app">
   <div>{{ message }}</div>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     message: '<h1>vue的初次学习</h1>'
    }
   })
  </script>

v-html 指令 :用于输出 html 代码:

<div id="app">
   <div v-html="message"></div>
  </div>
  <script>
   new Vue({
    el: '#app',
    data: {
     message: '<h1>vue的初次学习</h1>'
    }
   })
  </script>

v-text 指令 :是用于输出文本       

<div id="app">
   <div v-text="message"></div>
  </div>
  <script>
   new Vue({
    el: '#app',
    data: {
     message: '<h1>vue的初次学习</h1>'
    }
   })
  </script>

2、Vue.js的条件判断

v-if条件判断指令

<div id="app">
   <p v-if="seen">现在你看到我了</p>
   <template v-if="ok">
    <h1>菜鸟教程</h1>
    <p>学的不仅是技术,更是梦想!</p>
    <p>哈哈哈,打字辛苦啊!!!</p>
   </template>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     seen: true,
     ok: true
    }
   })
  </script>

如果 seen 为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 in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名

1.迭代数组

<div id="app">
   <ol>
    <li v-for="site in sites">
     {{ site.name }}
    </li>
   </ol>
  </div>
  <script>
   new Vue({
    el: '#app',
    data: {
     sites: [
      {name: 'Runoob'},
      {name: 'Google'},
      {name: 'Taobao'}
      ]
    }
   })
  </script>

2.迭代对象中的属性

<div v-for="(val, key, i) in userInfo">
{{val}} --- {{key}} --- {{i}}
</div>

其中:【userinfo】是一个对象

3.迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

4、Vue.js 常用指令

v-cloak : 能够解决插值表达式闪烁的问题

v-bind :是vue提供的用于绑定属性的指令。可以简写为  : 要绑定的指令 。

<input type="button" value="按钮" v-bind:title="mytitle + '123'">
<script>
   var vm = new Vue({
    el: '#app',
    data: {
     mytitle: '这是一个自己定义的title'
    },
    methods: {
     show: function() {
      alert('Hello')
     }
    }
   })
  </script>

v-model :v-bind 只能实现数据的单向绑定。从M 自动绑定到V , 无法实现数据的双向绑定。 而 v-model 指令则可以实现表单元素和 M中数据的双向绑定。

注意: v-model指令只能运用在表单元素中 。

<div id="app">
   <h4>{{ msg }}</h4>
   <!-- input(radio, text, address, email....) select checkbox textarea -->
   <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
   // 创建 Vue 实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {
     msg: '大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
    },
    methods: {}
   });
  </script>

补充说明:前端MVVM 与后端的MVC的区别。

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

MVVM是前端视图层的概念。主要关注于视图层分离,也就是说:MVVM吧前端的视图层分为了三部分。Model ,View ,VM ViewModel

详解Vue中的基本语法和常用指令

5、Vue.js 事件处理器

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

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
   <button v-on:click="greet">Greet</button>
  </div>

  <script>
   var app = new Vue({
    el: '#app',
    data: {
     name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
     greet: function(event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if(event) {
       alert(event.target.tagName)
      }
     }
    }
   })
  </script>

6、事件修饰符

.stop       阻止冒泡

.prevent    阻止默认事件

.capture    添加事件侦听器时使用事件捕获模式

.self       只当事件在该元素本身(比如不是子元素)触发时触发回调

.once      事件只触发一次

<div id="app">
   <!-- 使用 .stop 阻止冒泡 -->
   <div class="inner" @click="div1Handler">
    <input type="button" value="戳他" @click.stop="btnHandler">
   </div>
   <!-- 使用 .prevent 阻止默认行为 -->
   <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> -->
   <!-- 使用 .capture 实现捕获触发事件的机制 -->
   <div class="inner" @click.capture="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
   </div> -->
   <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
   <div class="inner" @click="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
   </div>
   <!-- 使用 .once 只触发一次事件处理函数 -->
   <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> -->
   <!-- 演示: .stop 和 .self 的区别 -->
   <div class="outer" @click="div2Handler">
    <div class="inner" @click="div1Handler">
     <input type="button" value="戳他" @click.stop="btnHandler">
    </div>
   </div>
   <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
   <div class="outer" @click="div2Handler">
    <div class="inner" @click.self="div1Handler">
     <input type="button" value="戳他" @click="btnHandler">
    </div>
   </div>
  </div>
  <script>
   // 创建 Vue 实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
     div1Handler() {
      console.log('这是触发了 inner div 的点击事件')
     },
     btnHandler() {
      console.log('这是触发了 btn 按钮 的点击事件')
     },
     linkClick() {
      console.log('触发了连接的点击事件')
     },
     div2Handler() {
      console.log('这是触发了 outer div 的点击事件')
     }
    }
   });
  </script>

7、按键修饰符

v-on:keyup : 允许为 v-on 在监听键盘事件时添加按键修饰符

<input v-on:keyup.enter="submit">

绑定一个回车按键时间

8、Vue.js 样式的绑定

1、Class属性的绑定(v-bind:class)

<style>
   .active {
    width: 100px;
    height: 100px;
    background: green;
   }
  </style>
<div id="app">
   <div v-bind:class="{ active: isActive }"></div>
  </div>
<script>
   new Vue({
    el: '#app',
    data: {
     isActive: true
    }
   })
  </script>

也可以:

<div id="app">
   <div v-bind:class="active"></div>
  </div>

2、数组语法

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

<style>
   .active {
    width: 100px;
    height: 100px;
    background: green;
   }
   
   .text-danger {
    background: red;
   }
  </style>
  <div id="app">
   <div v-bind:class="[activeClass, errorClass]"></div>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
isActive: true,
     activeClass: 'active',
     errorClass: 'text-danger'
    }
   }) 
  </script>

同时在数组中我们也可以使用三元表达式:

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

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

1、直接设置样式

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">测试内联样式</div>
   </div>

2、绑定样式对象

<div id="app">
   <div v-bind:style="styleObject">测试绑定样式对象</div>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     styleObject: {
      color: 'green',
      fontSize: '30px'
     }
    }
   })
  </script>

3、绑定多个样式对象 

<div id="app">
   <div v-bind:style="[baseStyles, overridingStyles]">绑定多个样式对象</div>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     baseStyles: {
      color: 'green',
      fontSize: '30px'
     },
     overridingStyles: {
      'font-weight': 'bold'
     }
    }
   })
  </script>

总结

以上所述是小编给大家介绍的vue 的基本语法和常用指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 #Javascript
node.js express框架简介与实现
Jul 23 #Javascript
js微信分享接口调用详解
Jul 23 #Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 #Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 #Javascript
微信小程序 网络通信实现详解
Jul 23 #Javascript
微信小程序 确认框的实现(附代码)
Jul 23 #Javascript
You might like
php数组中包含中文的排序方法
2014/06/03 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jQuery技巧总结
2011/01/01 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
解决Python3下map函数的显示问题
2019/12/04 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
大学生毕业自荐信
2013/10/10 职场文书
广告设计应届生求职信
2014/03/01 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android