Vue的基本常识
Vue的使用方式
vuejs的使用官方提供了2种方式：
- 基于脚本导入使用，下载vue.js文件，通过script标签引入到html网页。
- 基于项目构建工具来进行使用，需要安装项目构建工具，自动构建成一个独立的项目。
目前官方推荐的项目构建工具：vue-CLI，vite。
Vue调试工具Vue Devtools 谷歌浏览器插件
官网地址：https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E
Vue的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种代码分工思想来的。
Model 指代的就是vue对象的data选项里面的数据。这里的数据要显示到HTML页面中。
View 指代的就是vue中数据要显示的HTML页面，也称之为“视图模板” 。
ViewModel 指代的是vue.js中我们编写代码时的创建vue实例对象vm了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data选项里面的数据被显示中p标签中就是vm对象自动完成的。vm对象会时刻的监控View和Model的变化，并保持双方数据的一致性！！！有时候，这个特性也叫双向数据绑定
ViewModel的创建模式
<script>
window.onload = function () {
let vm = Vue.createApp({
data() {
return {
test: "111"
}
},
methods() {
},
components: {}
}).mount("#app1")
console.log(vm);
console.log(vm.num);
console.log(vm.$data.num);
console.log(vm.$el); // vm对象控制的内容范围
console.log(vm.$el.parentElement); // vm对象本身绑定的标签元素
console.log(vm.$refs);
console.log(vm.$refs.p3);
vm.$refs.p3.style["background-color"] = "red";
}
</script>
Vue的常用指令
指令 (Directives) 是带有“v-”前缀的特殊属性，由vue提供的。每一个指令在vue中都有固定的作用。
在vue中提供了很多指令，常用的有：{{变量名}},v-if、v-model、v-for、v-html、@事件名或:属性名等等。
指令会在vm对象的data选项数据发生变化时，会同时改变元素中的其控制的内容或属性。
因为vue的历史版本原因，所以有一部分指令都有两种写法：
| vue1.x | vue2.x以后 | 描述 |
|---|---|---|
| v-html | v-html | 输出html内容到双标签中 |
| v-text="普通文本" | {{普通文本}} | 输出纯文本内容到双标签中 |
| v-bind:属性名 | :属性名 | 把属性中的内容当成vue变量进行输出 |
| v-on:事件名 | @事件名 | 绑定事件操作 |
Vue属性操作
vm.$data
1. createApp中的data选项，传递到vm对象内部时，已经变成了使用Proxy对象代理的属性，可以通过`vm.$data`来查询。
vm.$el
2. vm对象在经过调用mount方法绑定HTML标签以后，这个标签代表的就是当前vm对象的可控范围，可以通过`vm.$el`属性来查询，
通过要获取绑定vm的HTML元素，可以通过`vm.$el.parentElement`来获取。
vm.$refs # 通过$refs来抓取
3. vm对象提供$refs可以让我们开发者直接在vm控制的视图范围，使用`ref`属性绑定任意元素，并在`vm.$refs`中获取。
vm.$refs.p3 则表示获取视图代码中的 `ref="p3"`的标签。
$refs只能作用一次,有多个对象只有第一个生效
--------------标签属性--------------
<标签名 :标签属性="data变量名"></标签名>
<input :type="type" :checked="checked"></input>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
渲染后标签数据如下
标签：VUE,console,log,vue,vm,Vue,data
From： https://www.cnblogs.com/Young-shi/p/17390649.html