Vue.js入门与核心特性解析-优快云博客

1、每一个模块一个vue组件，每一个vue都有html+css+js 组件化
2、不需要直接使用Document操作，不需要一步一步操作。
在这里插入图片描述
3、使用虚拟DOM和优秀的diff算法，对dom进行复用

4、官方网站vue.js
5、使用vue的第一个页面，动态的接收一个参数，vue实例的创建，一个容器只能对应一个实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <!--
        1.想让vue工作就需要创建vue对象，且传入参数
        2.vue接管的元素依旧符合html规范，但是要同时满足vue语法
        3.vue接管的元素叫root容器，叫做【vue模板】
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello! {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示。

        //创建vue实例，参数是配置对象
        const x = new Vue({
            el:'#root',  //id选择器，找到容器，（类选择器。）
            data:{       //对象用于，提供el的数据去使用
                name:'小宝宝'
            }

        })
    </script>
</body>
</html>

6、插值语法和指令语法
使用v-bind:src="变量"进行单项绑定数据。后续简写为:，只有一个冒号加正常的属性名。

<!-- 准备好一个容器 -->
    <div class="root">
        <h1>插值语法</h1>
        <h1>你好，{{name}}</h1>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去百度</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示。

        //创建vue实例，参数是配置对象
        const x = new Vue({
            el:'.root',  //id选择器，找到容器，（类选择器。）
            data:{       //对象用于，提供el的数据去使用
                name:'小呆呆',
                url:'http://www.baidu.com'
            }
        })
    </script>

效果：
在这里插入图片描述
7、数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
    <div id="root">
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name"><br>
    </div>
</body>
    <script >
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data: {
                name:'小宝宝'
            },
        })
    </script>
</html>

8、MVVM模型
数据赋值的实质是将data(Model)中的数据，变成vue中属性，通过vue对象(VM)中转到元素(View)中赋值。dom对应页面。
在这里插入图片描述
9、defineProperty方法
给对象设置属性，对属性进行控制，get和set方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<!-- 定义属性方法 -->
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			//给person定义属性
			Object.defineProperty(person,'age',{
				//value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true, //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get:function(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})
			//既能遍历数组，也能遍历对象
			for (const key in person) {
				console.log(person[key])
			}

			// console.log(Object.keys(person))

			console.log(person)
		</script>
	</body>
</html>

vue学习笔记一