Vue.js基础入门

来源：互联网发布：当程序员需要什么条件编辑：程序博客网时间：2024/06/11 18:31

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Vue入门</title>    </head>    <body>      <!-- 定义一个 View -->      <div id="box">        {{message}}         <input type="text" v-model="message"/>      </div>      <script src="js/vue.js"></script>      <script>        /* *          * 定义一个 Modal          * */        var mes = {          message: 'hello'        }        /* *         * 创建一个 Vue 实例或 "ViewModal"          * 它用于连接 View 和 Modal         * */        new Vue({          el: '#box',  // 指向View          data: mes  // 指向Modal        })      </script>    </body></html>

常用指令

指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

1、v-model
可用于一些表单元素，常见的input、checkbox、radio、select
2、v-for
vue.js 1.0以前的版本是v-repeat

<ul id="box">    <li v-for="item in arr" >{{item}}</li></ul>var mes = {  arr: [1, 3, 4, 5]}new Vue({  el: '#box',   data: mes})

3、v-on
用于监听 DOM 事件

<button v-on:click="doSomething">doSomething</button>// "v-on:" 可以简写为 "@"<button @click="doSomething">doSomething</button>new Vue({  el: '#box',   methods: {    doSomething: function () {      alert(1)    }  }})

4、v-if、v-else-if、v-else、v-show
为true时都会显示出来
v-if、v-else-if、v-else值为false时，不会生成对应的节点
v-show为false时，会生成对应的节点，并用display:none隐藏

<div id="box">  <div v-if="aa == 1">v-if true</div>  <div v-else>v-else</div>  <div v-show="aa == 1">v-show true</div>  <div v-else>v-else</div>  <div v-if="aa != 1">v-if false</div>  <div v-else>v-else</div>  <div v-show="aa != 1">v-show false</div>  <div v-else>v-else</div>      </div>

　aa = 1时，浏览器的解析效果解析

这里写图片描述

5、v-bind
用来响应地更新 HTML 属性

<div v-bind:title="message">{{message}}</div>// "v-bind:" 可以简写为 ":"<div :title="message">{{message}}</div>

6、v-once
一次性地插值，当数据改变时，插值处的内容不会更新，v-once会影响到该节点上所有的数据绑定

过滤器

Vue.js 你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}new Vue({  // ...  filters: {    capitalize: function (value) {      if (!value) return ''      value = value.toString()      return value.charAt(0).toUpperCase() + value.slice(1)    }  }})

过滤器可以串联：{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数

0 0