学习总结1

一、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栏，既可查看修改数据，进行调试