Vue2学习（01）

一、概念

Vue是一个用于构建用户界面的渐进式框架。

名词解释：

构建用户界面：基于数据渲染出用户看到的画面

渐进式：循序渐进的学习

框架：一套完整的项目解决方案

二、创建Vue实例，初始化渲染

步骤：

1. 初始化一个容器，确定Vue管理的范围
2. 引入Vue.js包，我们此时使用的是开发模式的Vue
3. 创建Vue实例----new Vue()
4. 指定配置项---渲染数据

		<!-- 
		1.准备容器（vue管理的范围）
		2.引包(开发版本和生产版本两个包)
		3.创建实例
		4.添加配置项————完成渲染 
	-->
		<!-- 1.准备容器（vue管理的范围）加上id与其他盒子区分 -->
		<div id="app">
			//编写的代码
            账户：<input type="text" v-model="username"> <br><br>
            密码：<input type="password" v-model="password"> <br><br>
            <button @click="login">登录</button>
            <button @click="reset">重置</button>
            <div v-html="msg"></div>
		</div>
<!-- 2.引入开发版本的vue包(开发版本和生产版本两个包) -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
		<!-- 3.创建实例 -->
		<script>
			// 一旦引入了vueJs核心包,在全局环境中就有了vue构造函数，构造函数创建实例使用new关键字
			const app = new Vue({
               el:'#app',  //通过el去配置选择器，指定一个选择器表面vue管理的是哪个盒子
				data:{
                    //4.提供数据
                    msg : `<a href = 'www.baidu.com'>百度</a>
					<h1>学前端~</h1>`,
					count : 6666,
                    }，
                 methods:{
                    //4.方法
                 login(){
			       console.log(this.password,this.username)
		    	  
		          },
		         reset(){
			          this.username =''
			          this.password =''
		          }
                }
        })

三、插值表达式 {{ 表达式 }}

注意点：

1. 使用的数据必须存在data
2. 支持的是表达式，而非语句（如if,for...）
3. 不能再标签属性中使用{{ }}插值表达式

四、Vue的核心特性：响应式

数据的响应式处理---响应式是指数据变化，视图自动更新

访问和修改data中的数据，最终会被添加到实例上

• 访问数据："实例.属性名"
• 修改数据："实例.属性名" = "值"

使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

可以安装Vue插件从控制台调试Vue程序

五、Vue指令

v-html = "表达式"	动态获取元素的innerHTML
v-show = "表达式"	控制元素的显示与隐藏（频繁切换显示隐藏时使用）
v-if = "表达式"	根据条件创建或者移除节点来控制元素的显示与隐藏
v-else if = "表达式"	辅助v-if进行判断渲染，需要紧挨着v-if使用
v-else	辅助v-if进行判断渲染，需要紧挨着v-if使用
v-on : 事件名 = "内联语句"	注册事件=事件监听+提供处理逻辑，v-on:可以替换简写为@
v-on : 事件名 ="methods中的函数名"	v-on:可以替换简写为@，访问data中的变量要使用实例.属性名的方式
v-bind : 属性名 ="表达式"	可以省略简写为:属性名 = "表达式"，动态的设置html里面的属性
v-for = "(item,index) in 数组"	基于数据进行循环，多次渲染整个元素，注意写上:key = "唯一值"为了确保Vue进行列表正确的排序使用
v-model = "变量"	给表单元素绑定使得双向数据绑定，可以快速的获取或者设置表单元素内容（数据变化，视图自动更新；视图变化，数据自动更新）