详解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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
浅谈React之状态(State)
Sep 19 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP实现小偷程序实例
2016/10/31 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python3多线程操作简单示例
2018/05/22 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python字典按照value排序方法
2020/12/28 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
行政助理的岗位职责
2014/02/18 职场文书
自荐信的格式
2014/03/10 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
单位接收证明格式
2015/06/18 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技