Vue2之初步探索

1.创建Vue实例【体验】

步骤

1.准备容器，如：<div id="app"></div>
2.引包：官网--开发版本
3.创建Vue实例 new Vue()
4.指定配置项 el 和 data
	el		配置容器，指定vue管理的是哪个盒子
	data	提供数据

实际操作

//准备容器
<div id="app">
	<p>{{ name+'先生' }}</p>
	<p>{{ friend.name }}</p>
	<p>{{ age>=18 ? '成年' : '未成年' }}</p>
	<p>{{ age }}</p>
</div>
//引包
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
	
<script>
	//Vue实例
	const app = new Vue({
		el: '#app',
		//data中数据最终会被添加到实例中
		data: {
			name: 'tony',
			age: 10,
			friend: {
				name: 'jack',
				hobby: '热爱学习'
			}
		}
	})
</script>

结果展示

2.正式学习

2.1 插值表达式

作用：利用 表达式 进行插值渲染
语法：

{{ 表达式 }}

注意点

1.使用的数据要存在（在Vue实例的data中存在此数据）
2.支持的是表达式，不是语句 if for...
3.不能在标签属性中使用 {{ }}

案例

<div>{{ name+'先生' }}</div>
<p>{{ friend.name }}</p>
<p>{{ age>=18 ? '成年' : '未成年' }}</p>
<p>{{ age }}</p>

2.2 Vue特性：响应式处理

何为响应式？

data中数据变化时，视图会自动更新

原理

当数据改变时，Vue会自动监听到数据的变化，内部通过Dom操作，更新视图

如何访问及修改数据操作？

1.访问数据：实例.属性名

   案例：app.name

2.修改数据：实例.属性名 = 值

   案例：app.name = ‘tom’

案例：通过前后对比来感受响应式

前

<div id="app">
	<p>{{ name }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
	const app = new Vue({
		el: '#app',
		data: {
			name: 'tony'
		}
	})
</script>

结果展示

后

<div id="app">
	<p>{{ name }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
	const app = new Vue({
		el: '#app',
		data: {
			name: 'jack'	// 改动处
		}
	})
</script>

展示结果