初识VUE

文章目录

- Vue是什么
- 1.创建一个Vue实例
- 2.插值表达式'{{ }}'
- 3.Vue的响应式特性
- 4.开发者工具的安装

Vue是什么

概念：Vue是一个用于构建用户界面的渐进式框架

①构建用户界面：基于数据渲染出用户看到的界面

②渐进式：循序渐进

③ 框架：一套完整的项目解决方案

1.创建一个Vue实例

在这里插入图片描述

<body>
<!--创建Vue实例，初始化渲染1.准备容器（Vue所管理的范围）2.引包（开发版本/生产版本）官网3.创建实例4.添加配置项=>完成渲染 -->
<div class="box2"></div>
<div class="box"></div>
<div id="app"><!--这里将来会编写一些用于渲染的代码 --><!--一个插值表达式的语法：{{...}},前后要有空格--><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div> 
<!--引入的是开发版本的包  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>
//一旦引入Vuejs核心包，在全局环境，就有了 Vue 构造函数
const app=new Vue({//通过el配置选择器，指定Vue所管理的是哪个盒子el:'#app',//通过date提供数据data:{msg:'hello 黑马',count:666}
})
</script>

2.插值表达式’{{ }}’

插值表达式
插值表达式是一种Vue的模板语法
**1.作用：**利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2.语法：{{ 表达式 }}

<body>
<h3>{{ title }}</h3>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ age>=18? '成年':'未成年' }}</p>
<p>{{ obj.name }}</p>
</body>

3.注意点：
（1）使用的数据必须存在（data）

<p>{{ hobby }}</p>

（2）支持的是表达式，而非语句，比如2：if， for…

<p>{{ if }}</p>

（3）不能在标签属性中使用{{ }}插值

<p title="{{ username }}">我是p标签</p>

<body>
<!--插值表达式;Vue的一种模板语法作用：利用 表达式 进行插值渲染 语法：{{ 表达式 }}注意点：1，使用的数据要存在2.支持的形式，不是语句if for3.不能在标签中使用{{  }}
--><div id="app">{{ nickname }}{{ nickname.toUpperCase }}<!--将nickname里面的内容全都转成大写-->{{ nickname + '你好' }}{{ age>=18 ? '成年':'未成年' }}{{ friend.name }}{{ friend.desc }}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el:'#app',data:{nickname:'tony'age:18,//成年friend:{name:'jepson',desc:'热爱学习 Vue'}})</script>
</body>