4、Vue_模板语法/指令

2019-09-26 本文已影响0人猪儿打滚

介绍Vue常用的一些模板语法/指令

View层：定义div
插值表达式{{}}：用于接收来自Model的数据并输出展示
Vue实例：
el：指定当前vue对象接管了的div区域
data：用于定义属性，下面例子中有message、name、age()三个属性
methods：用于定义函数，可以通过return来返回函数值

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title> 第一个vue </title>
      <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <!-- V层，相当于dom -->
        <div id="app">
          {{ message }} <!-- 插值表达式，用于接收vue实例传过来的数据 -->
          <h4> name:{{ name }} </h4>
          <h4> 打招呼:{{ age() }}}</h4>
        </div>
        <script type="text/javascript">
          // 创建Vue实例，VM层
          let vm = new Vue({
              el:'#app', // 表示当前vue实例接管了id=app的div区域
              // 数据，M层
              data:{
                message : "hello, vue",
                name : "python"
              },
              methods:{
                // 定义age函数
                age: function () {
                  return this.message + '====== 来啦'
                }
              }
          })
        </script>
    </body>
</html>

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，html视图将也会产生相应的变化。所以当修改Vue实例中的值时，html视图会自动改变。

2、Vue实例的一些实例属性和方法

Vue实例的属性和方法用前缀 $标识，以便与用户定义的属性区分开来
有document.write()等方法

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title> 第二个vue </title>
      <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <!-- V层 -->
        <div id="app">
          {{ message }}
          <h4> name:{{ name }} </h4>
        </div>
        <script type="text/javascript">
          var message = '我要传过去数据------vue' // 定义变量
          var vm = new Vue({
              el:'#app',
              data:{
                message : message, // 接收变量并传递
                name : "python"
              }
          })
          // vue实例中的属性和方法，引用前缀是$
          document.write(vm.$data.message == message)   //true、可判断并输出，===表示类型和值都相同
          document.write('<hr>')    // 可输出标签
          document.write((vm.$el === document.getElementById('app'))) // true
        </script>
    </body>
</html>

3、插值表达式

{{}}：用于接收来自Model的数据并输出展示

4、指令：v-html

v-html：用于接收并输出html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
<div class="m">
    <div v-html="msg"></div>
</div>

<script>
  new Vue({
    el: '.m',
    data: {
      msg: '<h1>我是h1标签</h1>'
    }
  })
</script>
</body>
</html>

v-html

5、指令：v-bind

v-bind：用于接收并输出属性值（单向绑定；只能将model中的数据传递到页面）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind：把属性渲染到标签的属性中</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="btn">
       <!--<button v-bind:title="b_value">我是按钮</button>-->
      <button :title="b_value">我是按钮</button> <!-- v-bind的缩写，一个: -->
    </div>

<script>
  new Vue({
    el: '#btn',
    data:{
      b_value:'我是要传递过去的title属性值'
    }
  })
</script>
</body>
</html>

v-bind

6、指令：v-model

v-model：指令用来在 input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
双向数据绑定：
1.既可以将model的数据传递给绑定的属性，也可以将绑定的属性的数据传递给model
2.拿到输入的内容，然后输出显示。所以一般在可供输入、输出的控件元素上才能使用，比如说<input/>、<textarea/>、<select/>
v-model.vue：

<template>
    <div id="model">
        <form method="post" action="" >
            <label form="username" >用户名：</label>
                         <!-- 使用双向绑定，值传递给model的username-->
            <input id="username" type="text" placeholder="请输入用户名" v-model="username" />
            <br />
            <label form="password" >密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>  
                         <!-- 使用双向绑定，值传递给model的password -->
            <input id="password" type="password" placeholder="请输入密码" v-model="password" />
                         <!-- 接收model传来的值 -->
            <p>输入的用户名是：{{ username}}</p>
            <p>输入的密码是：{{ password }}</p>
        </form>
        
    </div>
</template>

<script>
    export default{
        'name':'model',
        data() {
            return {
                username: "",
                password:""
            }
        },
    }
</script>

<style>
</style>

APP.vue中导入并使用v-model.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="学习Vue"/>
    <model/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import model from './components/v-model'

export default {
  name: 'app',
  components: {
    HelloWorld,
    model
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

结果：

v-model

7、指令：v-on

v-on：用于监听DOM的事件，并触发对应的动作/方法，可简写为@

例子：点击按钮则反转msg
下面是v-on.vue，然后在APP.vue使用它

<template>
    <div>
        <p>{{msg}}</p>
        <!-- 监控click事件，有则触发reversemsg方法-->
        <button v-on:click="reversemsg">字符串反转</button>
    </div>
</template>

<script>
    export default {
        // 组件名字
        name: "v-on",
        // 数据
        data(){
            return {
                msg:"我要被反转"
            }
        },
        // 方法
        methods:{
            reversemsg() {
                // 反正要去掉字符串以及加上字符串
                this.msg = this.msg.split('').reverse().join('')
            }
        }
    }
</script>

<style scoped>

</style>

结果：

v-on

8、指令：v-if

v-if：根据所指的表达式的值true/false，来决定创建/隐藏指令所在的标签。（不是频繁显示/隐藏时使用）
v-if、v-else-if、v-else配合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if：根据表达式true/false来决定是否创建/删除所在标签</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
<div id="h1">
  <h1 v-if="see">see为ture时，本标签就创建；false时，本标签就删除</h1>
  <!-- 也可以这样写-->
 <h2 v-if ="age > 18">age大于18我就显示</h2>
</div>

<script>
  new Vue({
    el: '#h1',
    data:{
      see:false,
      age:19
    }
  })
</script>
</body>
</html>

v-if：true时

v-if：false时

9、指令：v-show

v-show：和v-if类似，也是根据所指的表达式的true/false来进行动作。只不过它只是会显示/隐藏所在的标签（通过display属性），而不是创建/删除。
（频繁显示/隐藏时使用）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-show：根据表达式true/false来决定是否显示/隐藏所在标签</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
<div id="h1">
  <h1 v-show="see">see为ture时，本标签就显示；false时，本标签就隐藏</h1>
</div>

<script>
  new Vue({
    el: '#h1',
    data:{
      see:true
    }
  })
</script>
</body>
</html>

v-show：true时

v-show：false时

10、指令：v-for

v-for：循环语句，一般用于绑定数据到数组来渲染一个列表

value in sites：sites是源数据数组，value是数组元素迭代的别名。
(value, key, index) in sites：后面两个是可选项key是键名，index是索引。
在渲染表单时，为了防止内容改变导致错乱，建议使用上key，然后使用v-bind:"xx"绑定key值。可以防止key改变位置时，该key对应列上的数据不会错乱，具体看例子

<template>
    <!-- 比如说想展示一个表格，内容使用for进行填充-->
    <table>

        <!-- 用法1 -->
        <tr>
            <!-- 绑定key值，相当于索引；例如性别从第三位改成第二位，那么之前性别下的内容也会跟着到第二位-->
            <th v-for="(th, key) in ths" v-bind:key="key">{{ th }}</th>
            <!-- 如果不绑定key值，那么性别下的内容还是在第三位。内容则会错乱-->
            <!-- <th v-for="th in ths" >{{ th }}</th>-->
        </tr>

        <!-- 用法2 -->
        <tr v-for="(td, item) in tds" :key="item">
          <td>{{td.name}}</td>
          <td>{{td.gender}}</td>
          <td>{{td.age}}</td>
        </tr>

    </table>
</template>

<script>
    export default {
        name: "v-for",
        data(){
            return {
                <!-- 表格的数据-->
                ths:["名称","年龄", "性别"],
                tds:
                    [
                        {"name":'lin', "age":18, "gender":"男"},
                        {"name":'yun', "age":18, "gender":"女"}
                    ]

            }
        }
    }
</script>

<style scoped> </style>

11、过滤器

Vue.js运行自定义过滤器，一般用于一些文本格式化操作，由“管道符”指示：

{{message | filterA }}：message是文本，filterA是过滤器方法的名称
{{message | filterA | filterB }}：过滤器可以串联
{{message | filterA('arg1', arg2)}}：message是传给过滤器的第一个参数，字符串'arg1'会作为第二个参数传给过滤器， arg2表达式的值将被求值，然后值传给过滤器作为第三个参数。
字符串第一个小写字母变成大写，例子：

<template>
    <div>
        {{ message | filterA}}
    </div>
</template>

<script>
    export default {
        name: "filter",
        data() {
            return {
                message: 'bsddasdfDSDSdfds'
            }
        },
        // 过滤器
        filters: {
            filterA(value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    }
</script>

<style scoped>

</style>

结果：

filter

12、修饰符`.lazy`

起到懒加载的作用，可以跟在指令的后面。比如说v-model.lazy，这样只有当鼠标去点击其它区域（比如空白处）时，才会启动监听事件。这样可以有效避免项目的压力，不需要时时刻刻进行事件的监听。

4、Vue_模板语法/指令

介绍Vue常用的一些模板语法/指令

2、Vue实例的一些实例属性和方法

3、插值表达式

4、指令：v-html

5、指令：v-bind

6、指令：v-model

7、指令：v-on

8、指令：v-if

9、指令：v-show

10、指令：v-for

11、过滤器

12、修饰符`.lazy`

猜你喜欢

热点阅读

4、Vue_模板语法/指令

介绍Vue常用的一些模板语法/指令

2、Vue实例的一些实例属性和方法

3、插值表达式

4、指令：v-html

5、指令：v-bind

6、指令：v-model

7、指令：v-on

8、指令：v-if

9、指令：v-show

10、指令：v-for

11、过滤器

12、修饰符.lazy

猜你喜欢

热点阅读

12、修饰符`.lazy`