一、初识
1.开发版本体积较大,未被压缩;生产版本,已被压缩的文件
2.解决两个提示
第一个提示是推荐安装devtools调试工具
第二个是“目前使用的是开发者的vue,生产版本不要这样做”
解决第一个提示: 安装调试工具到谷歌浏览器的扩展
解决第二个提示:
config对象包含vue的所有配置
Vue.config
修改值为false
成功
3.图标请求的问题
按住shift点击刷新,进行强制刷新,可以在network中看到一个请求
原因:在选择open with live server的时候,会以端口5500定义一个内置服务器,而当前文件夹就是根目录文件
解决方法,在更目录文件夹内放置一个图标文件即可
4.可以不使用变量接收
删除后,不影响效果
5.容器和实例之间的关系
(1)一对一的关系,一个容器无法使用两个实例,一个实例也只能被一个容器调用
(2)容器内,双括号内部必须写成js表达式(可以使用一个变量接收值的形式)
二、vue核心知识点
1.数据绑定基础
单向绑定:v-bind:数据从data流向页面
双向绑定:v-model:只能应用在表单类元素上,例如输入类元素,拥有双向互动的能力的元素才可以用v-model,
<body>
<!-- 准备好一个容器 -->
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name" />
<br />
双向数据绑定:<input type="text" v-model:value="name" />
</div>
</body>
<script>
Vue.config.productionTip = false; //阻止vue在启动时产生提示
new Vue({
el: "#root",
data: {
name: "张三",
},
});
</script>
简写的方式:
v-bind的简写可以直接用(:value);
v-model的简写可以省去冒号和value
单向数据绑定:<input type="text" :value="name" />
<br />
双向数据绑定:<input type="text" v-model="name" />
2.挂载的方式