vue -初识vue

vue介绍

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也
是单页(1个html文件)应用的Web应用框架。 Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获
取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue官网:https://cn.vuejs.org/guide/introduction.html

vue安装

1.直接引入

<script src="https://unpkg.com/vue@next"></script>

2.Vite Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
…

npm init vite@latest my-vue-app 

vue起步

1. 创建一个DOM容器，vue生成的内容需要显示在容器里面

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

2. 创建一个vue的模块，vue的模块(组件)是一段完整业务逻辑的代码。代码体现则是是一个对象。模块是vue

   里面的基本单位，用模块来实现各类ui界面

 const HelloVue={ // vue的组件需要安装vue的语法创建
            data(){ // data方法返回的数据可以在挂载的dom里面直接读取
                return {
                    message: "hello vue",
                    age:23
                }
            }
        }
      // 组件的data()函数里面返回的对象，会通过vue的响应式系统将其包裹为一个响应式对象，以$data的形式存储在vue实例中

3.把模块传入vue生成vue的实例，并挂载在dom上面显示

Vue.createApp(HelloVue).mount("#app") // 挂载vue的实例

扩展：

  console.log(app.$data)
        // data() 里面的数据是响应式数据，修改值，其他地方用到了该值的位置会自动更新
        setTimeout(() => {
            app.$data.age = 40 
        }, 2000);

4.methods属性创建的方法，可以通过组件实例直接调用。

 const Hello={ // 创建vue组件
            methods: { //methods属性创建的方法，可以通过组件实例直接调用。
                add(){ // 创建add方法
                    this.count++ // this表示当前组件对象,count则是data()返回的count
                },
                dec(){ // 递减
                    this.count--
                }
            }
        }
        let app=Vue.createApp(Hello).mount("#app")// 挂载vue实例
        console.log(app)
        
  setInterval(() => {
            app.dec()
        }, 1000);

Vue3 模板语法

一、插值

{{...}} 插值，可以插入data()返回的对象属性，也可以写单行js表达式

二、指令

以v- 开头的特殊前缀的属性。指令的值并不是字符串，是vue实例的属性或者方法

1、v-once 执行一次插值，后面的值变化不会再更新

<p v-once>计算:{{count}}</p>

2、v-html 可以渲染html标签

 <div v-html="con"></div>

3、v-bind 指令可以绑定标签属性，v-bind 可以简写为:

<button :disabled="isDisable">按钮1</button>

扩展：动态参数，可以用[]绑定动态参数作为属性

<div :[key]="value">box1</div> // key和value都是data()方法里面的数据

4、4. v-model 实现数据的双向绑定，一般用在input等输入框绑定输入元素的值

 <input type="text" v-model="text">
 <p>{{text}}</p>