vue之指令

指令介绍

v-model

用于数据绑定，用于将标签中内容与vue中数据绑定

示例

<!--模板-->
<div id="test"><!--view-->
  <input type="text" v-model="msg"><br>
  <input type="text" v-model="msg">
  <p>hello {{msg}}</p><!--大括号表达式-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test', 
    data: {//model  mvvm    vm则是new出来的实例
      msg: 'atguigu'
    }
  })
</script>

解释
- v-model让input中的内容与model中的数据关联起来，input中变，msg值变
- 创建Vue对象，这个vue对象是vue.js对外暴露的
- el即element,指定用vue来管理页面中的哪个标签区域.
- data即model
- div即view部分
- vue对象中的值，标签的值加{{}}引用，标签内可以利用指令来引用，比如v-model
效果

v-text
- 给标签体加文本，如果文本中有html标签的话也看成文本。
v-html
- 给标签加文本，但这个会把文本中的html标签识别出来。
v-bind
- 功能：指定变化的属性值
- 完整写法：v-bind:xxx=‘yyy’
- 简洁写法：:xxx=‘yyy’
v-on
- 功能：绑定回调函数
- 完整写法：
  
  v-on:click=‘test’
- 简洁写法：
  
  @click=‘test’

示例

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{{content}}</p>
  <p>{{content.toUpperCase()}}</p>
  <p v-text="url"></p>
  <p v-html="url"></p>
  <!--标签{{}}写的是js代码-->
  <h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br>
  <a v-bind:href="url">访问指定站点2</a><br>
  <a :href="url">访问指定站点2</a><br>
  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test">点我</button>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      content: 'NBA I Love This Game',
      url: 'http://www.baidu.com'
    },
    methods: {
      test () {
        alert('好啊!!!')
      }
    }
  })
</script>

效果
解释第2项
- 第一个链接，发生错误，因为引用不了
- 第二链接，强制绑定数据，点击定向到百度
- 第三个链接，强制绑定数据简写，点击定向到百度

vue之指令

vue之指令

指令介绍

相关推荐