详解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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
JS数组方法some、every和find的使用详情
Oct 05 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
也谈php网站在线人数统计
2008/04/09 PHP
php生成略缩图代码
2012/07/16 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
服装销售人员求职自我评价
2013/09/26 职场文书
物控部经理职务说明书
2014/02/25 职场文书
妈妈活动方案
2014/08/15 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
单位计划生育责任书
2015/05/09 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
会计实训总结范文
2015/08/03 职场文书
PHP新手指南
2021/04/01 PHP
详解在OpenCV中如何使用图像像素
2022/03/03 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers