vue基本指令

v-bind基础使用

动态地绑定一个或多个属性，或者绑定一个组件 prop 到表达式。

语法：v-bind:属性名 = 属性值

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

v-bind语法糖

缩写：: （真实开发时常用）

<!-- 缩写 -->
<img :src="imageSrc">

imageSrc 是一个变量。v-bind方式绑定的都是变量
若要绑定常量，则要加引号

条件渲染

v-if/v-else-if/v-else:

底层通过对dom树节点进行添加和删除来控制展示和隐藏，会频繁增删节点

用法：条件渲染可跟boolean类型的true，false或者表达式

注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，中间不允许间隔其他元素，否则它将不会被识别。

v-show

底层通过控制元素的display属性来进行标签的显示和不显示控制，并没有删除

用法：跟boolean型变量或表达式

v-if 对比 v-show

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

基础用法

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名,可任意起。

也可以用 of 替代 in 作为分隔符

用法：v-for="别名 in 数组名"

v-for 还支持一个可选的第二个参数，即当前项的索引。

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
//key绑定变量要加“：”，绑定字符串常量不加
<div v-for="(item,index) in items" :key="item.id">
  
</div>

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for里使用对象

//三个参数：索引、属性名、属性值
<ul id="v-for-object" class="demo">
  <div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

v-on

文档：https://cn.vuejs.org/v2/api/#v-on

缩写： @

参数：event

修饰符：见API文档

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>

在定义方法事件是省略了小括号，但方法本身是需要一个参数的，这个时候Vue默认会将浏览器生产的event事件对象作为参数传入到方法

在调用方法时如何手动的获取浏览器参数的event对象(可传其他参数)

<button v-on:click="doThat('hello', $event)"></button>

hello加了引号表示字符串常量，不加引号表示变量

方法不需要额外参数，那么方法后的()可以不添加

如果方法本身有一个参数，那么默认将原生事件event参数传递进去

如果需要同时传入event事件和某个参数，可以通过$event传入事件

v-model

作用：你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；

checkbox 和 radio 使用 checked property 和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件。

text文本

原理：v-model 本质上不过是语法糖，本质包含两个操作

v-bind绑定一个value属性
v-on给当前元素绑定input事件

<body>
    <div id="app">
        <!--<input type="text" v-model="message"> -->
        <!-- 等同于 -->
        <input type="text" :value="message" @input="message = $event.target.value">  
        <h2>{{message}}</h2>
    </div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            message:'hello',
        }
    })
</script>
</body>

radio单选按钮

<body>
    <div id="app">
        <input type="radio" value="男" name="sex" v-model="sex">男
        <br>
        <input type="radio" value="女" name="sex" v-model="sex">女
        <h2>您选择的性别是: {{sex}}</h2>
    </div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            sex:'女'
        }
    })
</script>
</body>

value属性是选中单选按钮后赋给sex的值

name属性实现互斥；v-model绑定属性后可以省略name属性，同时实现互斥

checkbox复选框

<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>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            sex:'女',
            checkedNames:[],
        }
    })
</script>
</body>

标签为 input 元素定义标注（标记）。

它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

<!-- 单选框，同意之后点击下一步 -->
<body>
    <div id="app">
        <input type="checkbox" id="license" value="licese" v-model="agree">
        <label for="license">请同意协议</label>
        <button :disabled="!agree">下一步</button>
    </div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            sex:'女',
            checkedNames:[],
            agree:'false'
        }
    })
</script>
</body>

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，但是有时我们可能想把值绑定到动态property如网络获取的值或data中值，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

<body>
<div id="app">
    <label v-for="item in originNames" :for="item">
        <input type="checkbox" :value="item" id="item" v-model="originNames">{{item}}
    </label>
    <h2>选中的名字是：{{originNames}}</h2>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
           originNames:["丸子","莉香","三上"]
        }
    })
</script>
</body>

posted @ 2020-11-22 17:33 至安阅读(115) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

至安