Vue基础系列数据绑定-单项数据绑定-双向数据绑定-el与data的两种写法

Posted 2022-02-24 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列数据绑定-单项数据绑定-双向数据绑定-el与data的两种写法相关的知识，希望对你有一定的参考价值。

和阿牛一起冲Vue

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年2月20日🌹
🆕最新更新时间：🎄2022年2月20日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！

前言

青春，因为奋斗与奉献更美丽。

一、数据绑定有两种方法：

1、单项数据绑定v-bind

功能：用于解析标签体内容。

 <input type="text" v-bind:value="name">

2、双向数据绑定v-model

注意：双向绑定只能引用于表单类型value。

<input type="text" v-model:value="name">

	备注：不是搜所有的元素都是可以写modle的。

二、数据绑定的便捷写法

单项数据绑定:

<input type="text" :value="name">

双项数据绑定:

<input type="text" v-model="name">

总结

Vue中有2种数据绑定的方式：
	1.单向绑定(v-bind)：数据只能从data流向页面。
	2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
	1.双向绑定一般都应用在表单类元素上（如：input、select等）
	2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

三、el与data的两种写法

挂载容器：

//el的两种写法
	 const v = new Vue(
		//el:'#root', //第一种写法
		data:
			name:'尚硅谷'
		
	)
	console.log(v)
	v.$mount('#root') //第二种写法

主要的就是：

 v.$mount('#root')

data数据：

// 箭头函数没有自己的this
         要写成普通的函数
         data: function () 
             return 
                 name: 'jack'

需要注意的是，对象式和函数式(这个函数必须返回一个对象，必须是普通函数)

//data的两种写法
		new Vue(
			el:'#root',
			//data的第一种写法：对象式
			/* data:
				name:'尚硅谷'
			 */

			//data的第二种写法：函数式
			data()
				console.log('@@@',this) //此处的this是Vue实例对象
				return
					name:'jack'
				
			
		)

三、代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>单项数据绑定:</h1>
        单项数据绑定:<input type="text" v-bind:value="name"><br />
        <!-- 双向绑定只能引用于表单类型value -->
        <h1>双向数据绑定</h1>
        双项数据绑定:<input type="text" v-model:value="name">

        单项数据绑定:<input type="text" :value="name"><br />
        <!-- 双向绑定只能引用于表单类型value -->
        双项数据绑定:<input type="text" v-model="name">
    </div>


</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    const v = new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: 
                url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
                name: '勇敢牛牛'
            
        
        /*  箭头函数没有自己的this
         要写成普通的函数
         data: function () 
             return 
                 name: 'jack'
             
          */
    );
    console.log(v);
    v.$mount('#root')
</script>
</script>

</html>