Vue学习笔记3-表单双绑、组件

最新推荐文章于 2022-01-10 10:15:36 发布

扎克风暴

最新推荐文章于 2022-01-10 10:15:36 发布

阅读量105

点赞数

分类专栏： Vue

原文链接：https://mp.weixin.qq.com/mp/homepage?__biz=Mzg2NTAzMTExNg==&hid=1&sn=3247dca1433a891523d9e4176c90c499

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

什么是双向数据绑定

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

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

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

注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="textMessage">{{textMessage}}<br/><br/>
    输入的文本：<input type="text" v-model="textMessage">{{textMessage}}<br/><br/>
    输入的文本域：<textarea type="text" v-model="textAreaMessage"></textarea>{{textAreaMessage}}<br/><br/>
    选择的单选框：<input type="radio" name="sex" value="man" v-model="radioMessage">男
    <input type="radio" name="sex" value="woman" v-model="radioMessage">女
    <p>单选框选择了：{{radioMessage}}</p>
    下拉框:
    <select v-model="selectMessage">
        <option value="" disabled>--请选择--</option>
        <option value="a">A</option>
        <option>B</option>
        <option>C</option>
    </select>
   <p> 下拉框选择了：{{selectMessage}}</p>

</div>
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    var vm = new Vue({

        el: "#app",
        data: {
            textMessage: "dafdf",
            textAreaMessage: "dafa",
            radioMessage:'',
            selectMessage:''
        }
    })
</script>

</body>
</html>

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

什么是组件

组件是可复用的 vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th: fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
在这里插入图片描述
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

第一个Vue组件

注意:在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。
使用Vue.component()方法注册组件,格式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
    <ul> <component1></component1></ul>
   
</div>


<!--1.导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("component1", {
        template: '<li>Hello</li>'
    })
    var vm = new Vue({

        el: '#app',
        data: {
            message: 'red',

        }


    })


</script>

</body>
</html>

在这里插入图片描述

说明：

Vue.compent()：注册组件
my-component-li:自定义组件的名字
template：组件的模板

使用props属性传递参数

像上面那样组件没有任何意义，所有我们是需要传递参数到组件的，此时就需要使用props属性了！
注意：默认规则下props属性里的值不能为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
    <component1></component1>
    <!--组件：传递给组件中的值：props-->
    <component2 v-for="item in items" v-bind:zhou="item">
    </component2>
</div>
<!--1.导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("component1",{
        template:'<li>Hello</li>'
    })
    Vue.component('component2',{
        props:['zhou'],
        template: '<li>{{zhou}}</li>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            message:'red',
            items:['java','linux','css']
        }
    })
</script>

</body>
</html>

在这里插入图片描述
说明:

v-for=“item in items”:遍历vue实例中定义的名为 items 的数组，并创建同等数量的组件
v-bind:zhou= "item”:将遍历的 item项绑定到组件中 props定义的名为 zhou属性上;=号左边的zhou为props定义的属性名，右边的为 item in items中遍历的item项的值

扎克风暴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记3-表单双绑、组件

什么是双向数据绑定Vue.js 是一个 MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js 的精随之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。为什么要实现数据的双向绑定在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向
复制链接

扫一扫