一、Vue是什么?
Vue是一用于构建用户界面的渐进式框架
1.构建用户界面:基于数据动态渲染页面
2.渐进式:循序渐进的学习
3.框架:一套完整的项目解决方案,提升开发效率(理解记忆规则)
规则——>官网
二、创建一个Vue示例
初始化渲染的核心步骤:
1.准备容器
2.引包(官网)——开发版本/生产版本
3.创建Vue实例 new Vue()
4.指定配置项 el data=>渲染数据
① el指定挂载点,选择器指定控制的是那个盒子
② data提供数据
<div id="app">
// 这里将来会编写一些用于渲染的代码逻辑
{{msg}}
</div>
//引入的是开发版本包——包含完整的注释和警告
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue .js">
</script>
<script>
//一旦引入VueJs核心包,在全局环境,就有了Vue构造函数
const app = new Vue({
//通过el配置选择器,指定Vue管理的是那个盒子
el:'#app',
//通过data提供数据
data:{
msg:'Hello world'
}
})
</script>
三、插值表达式
插值表达式是一种Vue的模板语法
1.作用:利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个结果
2.语法:{{ 表达式 }}
<h3>{{title}}</h3>
<p>{{nickname.toUpperCase()}}</p>
<p>{{age>=18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
3.注意点
(1)使用的数据必须存在(data)
<p>{{hobby}}</p> 错误
(2)支持的是表达式,而非语句
<p>{{if}}</p> 错误
(3)不能再标签属性中使用 {{ }}插值
<p title="{{username}}">我是P标签</p> 错误
四、Vue 核心特性:响应式
数据的响应式处理——>响应式:数据变化,视图自动更新
如何修改or访问?data中的数据,最终会被添加到示例上
① 访问数据:“实例.属性名”
② 修改数据:"“实例.属性名”=“值”
五、开发者工具安装
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件:下载——>开发者模式——拖拽安装——插件详情允许访问文件
打开Vue运行页面,调试工具中的Vue栏,既可查看修改数据,进行调试