vue的基础语法（实现元素赋值，循环，判断，以及事件响应）

最新推荐文章于 2023-04-11 23:03:52 发布

少年西西

最新推荐文章于 2023-04-11 23:03:52 发布

阅读量2.8k

点赞数 1

分类专栏： F_java框架阶段 # F5_VUE框架文章标签： vue

本文链接：https://blog.csdn.net/qq_45554909/article/details/111467738

版权

F_java框架阶段同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

F5_VUE框架

9 篇文章 1 订阅

订阅专栏

1、v-bind

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

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">
    <!--             
        如果要将模型数据绑定在html属性中            
    则使用 v-bind 指令,此时title中显示的是模型数据  
    title是span标签的一个属性      
    -->
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定信息</span>
    <!-- v-bind 指令的简写形式： 冒号（:） -->
    <h1 :title="message">鼠标悬停几秒钟查看此处动态绑定信息</h1>
</div>

</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data:{
            message:'页面加载于' + new Date().toLocaleString()
        }
    });
</script>
</html>

结果：
在这里插入图片描述

打开浏览器的 JavaScript 控制台，输入 vm.message = ‘ddddd’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新
在这里插入图片描述

v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

2、v-if 系列

v-if
v-else-if
v-else


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">
    <!--             
         === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
    -->
    <span v-if="type === 'A'">A</span>
    <span v-else-if="type === 'B'">B</span>
    <span v-else>C</span><br/>

    <!--当message为true,大于0的数字，字符（包括'0')，字符串（包括"0"),结果都为真-->
    <span v-if="message">为真</span>
    <span v-else="message">为假</span>


</div>

</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data:{
           type: 'A',
            message: '\u0000'
        }
    });
</script>

3、v-for

语法格式：

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

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

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">
    <li v-for="item in items">
        {{item.message}}
    </li>

</div>

</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data:{
            //items是数组
            items: [
                {message: 'AAAAA'},
                {message: 'BBBBB'},
            ]
        }
    });
</script>

在这里插入图片描述

4、v-on

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

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">
     <!--            
         在这里我们使用了 v-on 绑定了 click 事件            
         并指定了名为 sayHi 的方法        
         -->
    <button v-on:click="sayHi">点击</button><hr/>
     <!-- v-on 指令的简写形式 @ -->
    <button @click="sayHi">点击</button>
</div>

</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data:{
            message: 'Hello Vue'
        },
        // 方法必须定义在 Vue 实例的 methods 对象中
        methods:{
            sayHi: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert(this.message);
            }
        }
    });
</script>

5、v-model

双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。

你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，
其中@input是对输入事件的一个监听
:value="test"是将监听事件中的数据放入到input，input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。

总结：
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

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

自定义组件使用v-model，应该有以下操作：

1.接收一个value prop
2.触发input事件，并传入新值

在原生表单元素中：

<input v-model="inputValue">

相当于

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中

<my-component v-model="inputValue"></my-component>

相当于

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input', value)

测试代码

文本框

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">

     <!-- v-bind:value只能进行单向的数据渲染
        数据变视图变，视图变数据不变-->
    <input type="text" v-bind:value="message"/><hr/>

     <!-- v-model 可以进行双向的数据绑定
     数据变视图变，视图变数据也变
     本质上是<input :value="message" @input="message = $event.target.value"
     其中@input是对<input>输入事件的一个监听
     :value="message"是将监听事件中的数据放入到input-->
    <input type="text" v-model="message"/>
    
    <p>{{message}}</p>
</div>
</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data:{
            message:33333
        }
    });
</script>

在这里插入图片描述

单选和复选框

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<div id="vue">

    性别：
    <!--单选框选中了哪一个是看同一组的单选框的value值是多少 -->
    <input id="man" type="radio" value="男" v-model="picked">男
    <input id="woman" type="radio" value="女" v-model="picked">女
    <p>选中了谁:&nbsp;{{picked}}</p>
    <hr/>
    爱好：
    <input type="checkbox" value="sing" v-model="checks">唱歌
    <input type="checkbox" value="dance" v-model="checks">跳舞
    <input type="checkbox" value="draw" v-model="checks">画画
    <p>爱好有:&nbsp;{{checks}}</p>

</div>

</body>

<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        data: {
            picked: '',

            checks:[]
        }
    })

</script>

在这里插入图片描述

下拉框

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<!--将数据绑定到页面元素（视图层）-->
<div id="vue">
   下拉框
    <select v-model="select">
        <!--disabled表示警用，不可改也不提交 -->
        <option disabled value="">请选择</option>
        <!--在<option>中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，
        在selected中的字符串为‘A被选'，如果我们不在<option>中设置value值的话
        那么selected中的字符串将是<option>中的值‘A'-->
        <option value="A被选">A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>

    <p>选中的值：{{select}}</p>
</div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data:{
            select:''
        }
    });
</script>

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

少年西西

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue的基础语法（实现元素赋值，循环，判断，以及事件响应）

1、v-bind用 v-bind 来绑定元素特性!<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title></head><script src
复制链接

扫一扫