Vue开端

初识vue

• vue框架 框架

  1. 做项目 类似 盖房子
  2. 使用html css javascript实现相当于最原始方法盖房子 使用框架后相当于使用钢筋混泥土实现 Vue使用一定不会比原生开发复杂 使用简单 原理复杂

• vue学习 使用vue框架技术操作html标签元素，操作内容，样式，属性，事件

• 第一个vue程序

     <script src="../lib/vue.global.js"></script>
   	<script>
        // 创建vue实例对象
   		const app = Vue.createApp({
               // data选项 定义数据 
               // 为什么data定义为函数形式：  保证一个vue实例对应一个数据对象 (组件时深入) 
   			data() {
   				return {
   					message: '初始vue程序',
                 title:'vue学习'
   				}
   			},
           methods:{
              plus(){
                 this->选项对象
              },
              minus(){
  
              }
           }
   		})
        app.mount("#app") //mount方法 让vue实例与html元素关联 
   	</script>
  

vue基础

指令: v-开头的特殊属性

1. 操作内容 {{变量}} v-html v-text v-pre

2. 操作属性 v-bind:属性名=属性值 v-bind:href="url" :src='url'

3. 操作样式 :class="url" :class="{'ative':isative}" :class="['w','h']"

   :style="url" :style="{}" :style="[]"

4. 操作事件 v-on:事件类型=vue事件处理方法 v-on:click="plus" @click="plus"

5. this关键字 选项对象，操作data选项中数据和methods方法

6. 小示例 计数加一减一

响应式原理

• Object.propropery()
• Proxy 代理

指令

• 双向数据绑定 v-model