Vue基础语法——v指令的基本用法

1、v-bind

使用 v-bind 来绑定元素特性!

01-v-bind.html


<body>
  <div id="app">
    <!--
      如果要将模型数据绑定在html属性中
      则使用 v-bind 指令,此时title中显示的是模型数据
    -->
    <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h1>
    <!-- v-bind 指令的简写形式: 冒号(:) -->
    <h1 :title="message">我是标题</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
     }
   })
  </script>
</body>

你看到的 v-bind 特性被称为指令。指令带有前缀 v- ,以表示它们是 Vue 提供的特殊特性。
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)

2、v-if

什么是条件判断语句,就不需要我说明了吧( ̄▽ ̄),以下两个属性!

  • v-if
  • v-else-if
  • v-else

02-v-if.html

<body>
  <div id="app">
    <!--
      === 三个等号在 JS 中表示绝对等于(就是数据与类型都要相等)
    -->
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else-if="type === 'C'">C</h1>
    <h1 v-else>who</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        type: 'A'
     }
   })
  </script>
</body>

测试:观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化

3、v-for

语法格式:

<div id="vue">
  <li v-for="item in items">
   {{ item.message }}
  </li>
</div>

注:items 是数组,item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似!

03-v-for.html

<body>
  <div id="app">
    <li v-for="item in items">
     {{ item.message }}
    </li>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        //items数组
        items: [
         {message: '狂神说Java'},
         {message: '狂神说前端'}
       ]
     }
   });
  </script>
</body>

测试 :在控制台输入 vm.items.push({message: ‘狂神说运维’}) ,尝试追加一条数据,你会发现
浏览器中显示的内容会增加一条 狂神说运维 .

4、v-on

v-on 监听事件:
事件有Vue的事件、和前端页面本身的一些事件!我们这 click 是vue的事件,可以绑定到Vue中的
methods 中的方法事件!

04-v-on.html

<body>
  <div id="app">
    <!--
      在这里我们使用了 v-on 绑定了 click 事件
      并指定了名为 sayHi 的方法
    -->
    <button v-on:click="sayHi">点我</button>
    <!-- v-on 指令的简写形式 @ -->
    <button @click="sayHi">点我</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
     },
      // 方法必须定义在 Vue 实例的 methods 对象中
      methods: {
        sayHi: function (event) {
          // `this` 在方法里指向当前 Vue 实例
          alert(this.message);
       }
     }
   });
  </script>
</body>

点击测试即可

5、v-model

双向数据绑定

Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发
生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向
绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。
你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它
会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它
负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

05-v-bind-1.html 文本框

<body>
  <div id="app">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="searchMap.keyWord">
    <!-- v-model 可以进行双向的数据绑定 -->
    <input type="text" v-model="searchMap.keyWord">
    <p>您要查询的是:{{searchMap.keyWord}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
      el: '#app',
      data: {
        searchMap:{
          keyWord: 'kuangshen'
       }
     }
   })
  </script>
</body>

填写完毕后, 打开浏览器,对比两个输入框,查看效果!

05-v-bind-2.html 单复选框

<body>
  <div id="app">
   单复选框:
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{ checked }}</label>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
 <script>
    new Vue({
      el: '#app',
      data: {
        checked: false
     }
   })
  </script>
</body>

05-v-bind-3.html 多复选框

<body>
  <div id="app">
   多复选框:
    <input type="checkbox" id="jack" value="Jack" v-
model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-
model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-
model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
      el: '#app',
      data: {
        checkedNames: []
     }
   })
  </script>
</body>

05-v-bind-4.html 单选按钮

<body>
  <div id="app">
   单选按钮:
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {{ picked }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        picked: ''
     }
   })
    </script>
</body>

05-v-bind-5.html 下拉框

<body>
  <div id="app">
   下拉框:
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>选中的值: {{ selected }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        selected: ''
     }
   });
  </script>
</body>

注意:如果 v-model 表达式的初始值未能匹配任何选项,< select> 元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,
更推荐像上面这样提供一个值为空的禁用选项。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值