vue.Day4

夜雨_tbw

于 2019-12-09 20:19:02 发布

阅读量125

点赞数

文章标签： vue JavaScrtip

本文链接：https://blog.csdn.net/weixin_45567242/article/details/103464128

版权

v-model的使用

v-model的原理

当我们再输入框输入内容时，因为input中的v-model绑定了message，所以才会实时的将输入的内容传递给message，message发生改变当message发生改变时，因为上面我们使用Mustache语法，将message的值直接插入到DOM中，索引DOM会发生响应的改变
所以，通过v-model可以实现双向绑定

v-model其实是语法糖，它的背后本质是包含两个操作
v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
            <!-- <input type="text" v-model = "message"> -->
            <!-- <input type="text" :value="message" @input = "valueChang"> -->
            <input type="text" :vlue = "message" @input = "message = $event.target.value">
            {{message}}
		</div>
		<script src="../js/vue.js"></script>
        <script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！"
                },
                methods:{
                    valueChang(event){
                        this.message = event.target.value
                    }
                }
                
			})
		</script>
	</body>
</html>

v-model 单选和多选框的使用

单选框的使用
同意协议小案例：用button的disabled属性给他绑定事件如果他点击选中后disabled属性为false，相反disabled属性为true
多选框的使用
给每个input绑定v-model 为hobbies 当他选中的话他会把选中的数据添加进hobbies数组中

        <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
           <!-- <label for="agree">
               <input type="checkbox" id="agree" v-model = 'isAgree'>同意协议
           </label>
           <h2>你选择的是{{isAgree}}</h2>
           <button :disabled = "!isAgree">下一步</button> -->

               <input type="checkbox" value="篮球" v-model = 'hobbies'>篮球
               <input type="checkbox" value="足球" v-model = 'hobbies'>足球
               <input type="checkbox" value="乒乓球" v-model = 'hobbies'>乒乓球
               <input type="checkbox" value="羽毛球" v-model = 'hobbies'>羽毛球
               <h2>你的爱好是:{{hobbies}}</h2>
        </div>
        
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
                    message:"你好！",
                    isAgree:false,//单选框
                    hobbies:[]//多选框
				}
			})
		</script>
	</body>
</html>

v-model radio的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
            <label for="">
                <input type="radio" id="man" name = 'sex' value="男" v-model = 'sex'>男
            </label>
            <label for="">
                <input type="radio" id="famle" name = 'sex' value="女" v-model = 'sex'>女
            </label>
            <h2>你选择的性别是：{{sex}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
                    message:"你好！",
                    sex: '男'
				}
			})
		</script>
	</body>
</html>

将两个v-model都绑定为sex sex默认为空当他选中那个 sex就是那个注意两个input中的name要一样都为sex

v-model修饰符的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
            <input type="text" v-model.lazy = 'message'>
          <h2> {{message}}</h2>  
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！"
				}
			})
		</script>
	</body>
</html>

lazy（懒惰）修饰符默认情况下，v-model默认是在input时间中同步输入框的数据的
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
lazy修饰符也可以当数据失去焦点或者按下键盘回车时候在更新数据

组件化开发！！！

什么是组件化，组件化的基本步骤

什么是组件化

什么是组件化
任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
但是，我们人有一种天生的能力，就是将问题进行拆解
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体中，你会发现大量问题迎刃而解
组件化是vue.js的重要思想
他提供了一种抽象，让我们可以开发出一个独立可服用的小组件来构造我们的应用
任何的应用都会被抽成一颗组件树
注册组件的基本步骤
1.创建组件构造器
调用 Vue.extend()
2.注册组件
Vue.component() component 组件
3.使用组件
Vue实例的作用范围内使用组件

组件化得基本步骤

1创建组件构造器对象
利用extend创建一个组件构造器，通常在创建组件构造器时，传入template代表我们自定义组件的模板
该模板就是在使用组件的地方，要显示的HTML代码

 const cpnc = Vue.extend({
             template: `
             <div>
             <h2>我是标题</h2>
             <p>我是内容哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
			 <p>我是内容哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>    
             </div>`
         })

2.注册组件
调用Vue.component()时将刚才的组件构造器注册为一个组件，并且给他起一个组件的标签名称
Vue.component(组件的标签名，组件名)

		Vue.component('Mytbw',cpnc)

3使用组件
在Vue实例的作用范围内使用组件

<div id="app">
            <Mytbw></Mytbw>
            <Mytbw></Mytbw>
            <Mytbw></Mytbw>
            <Mytbw></Mytbw>
		</div>

夜雨_tbw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.Day4

v-model的使用v-model的原理当我们再输入框输入内容时，因为input中的v-model绑定了message，所以才会实时的将输入的内容传递给message，message发生改变当message发生改变时，因为上面我们使用Mustache语法，将message的值直接插入到DOM中，索引DOM会发生响应的改变所以，通过v-model可以实现双向绑定v-model其实是语法糖，...
复制链接

扫一扫