vue.js语法及常用指令


Posted in Javascript onOctober 29, 2017

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

1.使用

使用Vue的过程就是定义MVVM(Model-View-ViewModel)各个组成部分的过程的过程。

<!--这里定义View-->
<div id="app">{{ message }}</div>
<script src="js/vue.js"></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: 'Hello World!'
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: '#app',
      data: exampleData
    })
</script>

2.Vue.js的常用指令

Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令: 

•v-if指令
•v-show指令
•v-else指令
•v-for指令
•v-bind指令
•v-on指令

Vue.js具有良好的扩展性,我们也可以开发一些自定义的指令,后面的文章会介绍自定义指令。

2.1 v-if指令

v-if后面赋予 可以转化为布尔类型的表达式

<div id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-if="yes">Yes!</h1>
      <h1 v-if="no">No!</h1>
      <h1 v-if="age >= 25">Age: {{ age }}</h1>
      <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
 <script src="js/vue.js"></script>
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
 </script>

这里最后就输出

<div id="app">
  <h1>Hello, Vue.js!</h1>
  <h1>Yes!</h1>
  <!---->
  <h1>Age: 28</h1>
  <!---->
</div>

2.2 v-show

<div id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-show="yes">Yes!</h1>
      <h1 v-show="no">No!</h1>
      <h1 v-show="age >= 25">Age: {{ age }}</h1>
      <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
  </script>

这里代码只是v-if改为v-show

输出为

<div id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</div>

这里区别是上面v-if直接不输出html代码,这里用display:none隐藏

2.3 v-else指令

<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 28,
        name: 'keepfool',
        sex: 'Male'
      }
    })
</script>

 前一兄弟元素必须有 v-if 或 v-else-if,新版的vue.js新增了v-else-if用法也跟v-if一样,不过前一兄弟元素必须有v-if或v-else-if,旧版的v-else前面可以跟v-show,但新版v-else前面不能是v-show了。

2.4 v-for指令

<div v-for="p in people">
   <h1>Age: {{ p.age }}</h1>
   <h1>Name: {{ p.name }}</h1>
   <h1>Sex: {{ p.sex }}</h1>
</div>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})
</script>

父元素用v-for,子元素可以遍历绑定的对应Array | Object | number | string

v-for还可以这样用:

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

2.5 v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute)

<div id="app">
   <ul class="pagination">
     <li v-for="n in pageCount">
       <a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a>
     </li>
   </ul>
</div>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeNumber: 1,
        pageCount: 10
      }
    })
  </script>

又例如:

<img v-bind:src="'/path/to/images/' + fileName">
<div v-bind="{ 'id': someProp, 'other-attr': otherProp }"></div>

2.6 v-on指令

<div id="app">
      <p><input type="text" v-model="message"></p>
      <p>
        <!--click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
      </p>
      <p>
        <!--click事件使用内联语句-->
        <button v-on:click="say('Hi')">Hi</button>
      </p>
</div>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function() {
          // // 方法内 `this` 指向 vm
          alert(this.message)
        },
        say: function(msg) {
          alert(msg)
        }
      }
    })
  </script>

2.7 v-model指令

v-model在表单控件元素上创建双向数据绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

总结

以上所述是小编给大家介绍的vue.js语法及常用指令,希望对大家有所帮助!

Javascript 相关文章推荐
浅谈React 属性和状态的一些总结
Nov 21 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解react-router如何实现按需加载
Jun 15 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 #Javascript
JavaScript代码执行的先后顺序问题
Oct 29 #Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
ES6中Class类的静态方法实例小结
Oct 28 #Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
You might like
PHP insert语法详解
2008/06/07 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
Python生成随机MAC地址
2015/03/10 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python标记语句块使用方法总结
2019/08/05 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
详解python如何引用包package
2020/06/07 Python
python drf各类组件的用法和作用
2021/01/12 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Java程序员面试题
2013/07/15 面试题
消防安全责任书
2014/04/14 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
七一活动主持词
2015/06/29 职场文书
2016国庆促销广告语
2016/01/28 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server