Vue3初始---Vue(1)

Vue3

学习本章前哈，因为我有了一定的后端的基础，所以，我将会用我所能理解且表述的话来记录，不是很好，但是很用心！！

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。（注意了啊，划重点了）
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

vue的官网：https://v3.cn.vuejs.org/guide/introduction.html

vue.js的下载地址

<script src="https://unpkg.com/vue@next"></script>
可以通过这行js代码直接进行线上导入   
*需要联网，并且会有延迟，不推荐


[vue.js下载地址](https://unpkg.com/vue@next)
直接复制粘贴
新建一个js文件保存即可，推荐
也可以去bootcdn的网站直接去下载

1.起步程序

第一个程序基本肯定得跟着官网走：
干完在分析！！！

<div id="counter">
  Counter: {{ counter }}
</div>

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

1. 分析展示的数据
   起始不难发现，{{ counter }}中的{{ }}是起了一个类似引用的作用，将Counter 中的data中的counter进行了一个数据的渲染
2. 挂着的div
   Vue.createApp(Counter).mount(‘#counter’)
   在这个函数中可以看到参数为 #counter 正好和上方的div所对应,所以理所应当，在 div id=“counter” 起了作用
3. “数值归宿”
   Vue.createApp(Counter).mount(‘#counter’)
   同2一样，在函数的参数中引入了定义的Counter，自然了，因谁果谁

---

好了，起步永远无聊，直接下一步哈 基本都是官网的哈

            mounted() {
                setInterval(() => {
                    this.counter++
                }, 1000)
            },

看看结果：

20220404_210055

其实看到结果；大家基本都猜到了mounted是一个 钩子函数（程序执行到某个程度会默认执行，就跟带着钩子一样勾上了带着一起走），所以才会有我们只是加入到了Counter中就起作用了

---

自定义方法了哈！！！

Counter: {{ counter }}
<button v-on:click="add">加10</button>

methods: {
	add() {
		this.counter += 10
    }
}

20220404_213905

在vue实例中是有一个methods的属性来放所有的方法的 注意啊！是methods不是method，调用的时候可以通过

v-on:事件（click…）=“方法名”

来给元素增加事件的监听、

并且在ES6的基础下我们可以把
add : funcation() {
		this.counter += 10
    }
    
简写为：
add() {
		this.counter += 10
    }

---

接下来浅的认识一下v-bind

<span v-bind:title="message">
        Counter: {{ counter }}
        <button v-on:click="add">加10</button>
</span>

 data() {
	return {
		counter: 0,
		message: "我是Vue",
	}
}

结果：

可以看的是在我们加入的title通过v-bind的绑定是生效的，在后期再去介绍他更重要的作用，现在说了肯定一脸懵逼！！因为我就是！哈哈哈哈！

---

今天再看最后一个吧!对象打电话了！哈哈哈哈哈！

数据双向绑定

<input type="text" v-model="message">
        message: {{message}}

v-model=“变量”
可以直接与变量进行洗个双向绑定，可能还是迷糊，看看结果就知道了

好多都没写，学习一分钟，理解两分钟，博客半小时！！！哈哈哈哈，晚安啦！明天继续！