Vue.js基础

创建 Vue 实例，初始化渲染的核心步骤:

1. 准备容器

2. 引包(官网)-开发版本/生产版本

3. 创建 Vue 实例 new Vue()

4. 指定配置项 el data => 渲染数据

①el指定挂载点，选择器指定控制的是哪个盒子

② data 提供数据

1.要有容器
<div id="app">
{{msg}}  //把要渲染的的数据丢双花括号里，变量的值就会渲染在这
    <h1>{{count}}</h1>    
</div>
    
2.引入包(官方文档复制)
    
3.//一旦引入 Vue]s核心包，在全局环境，就有了 Vue 构造函数
const app = new Vue({
//通过 el 配置选择器，指定 Vue 管理的是哪个盒子
el:'#app',
// 通过 data 提供数据
data:{
msg:'Hello 黑马',    //msg就是能够使用的变量数据
count:666
 }
})
​
//如果在以下盒子里也添加数据，是 不会被渲染
<div id="box">
    {{msg}}   //无效，因为el指定了app这个盒子
</div>

插值表达式：

插值表达式是一种 Vue 的模板语法

作用:利用表达式进行插值，渲染到页面中

表达式:是可以被求值的代码，JS引擎会将其计算出一个结果

2.语法:{{ 表达式 }}

​

{{ title }}

{{ nickname.toUppercase()}}

{{ age >= 18 ?'成年’:'未成年’}}

{{ obj.name }}

​

3.注意点:

• 使用的数据必须存在(data)里

• 支持的是表达式，而非语句，比如:if for…如：<p> {{if}}</p>

• 不能在标签属性中使用{{}} 插值

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

<div id="app">
    {{ nickname }}
    {{ nickname.toUpperCase()}}  //转大写
    {{ nickname +'你好'}}    //拼接字符串
    <p>{{ age >=18?'成年':'未成年'}}</p>  //结果18
    <p>{{ friend.name}}</p>  //这里注意要friend.什么什么，有层级关系
    <p>{{ friend.desc }}</p>
</div>
​
<script>
const app = newe Vue({
    el:'#app',
    data:{
       nickname:  'tony',
        age:18,
        friend:{
        name:'jepson',
         desc:'热爱学习 Vue'
    }
})
</script>

Vue核心特性：响应式

数据变化，视图自动更新

• 访问数据:"实例.属性名"

• 修改数据:"实例.属性名"="值"

<div id="app">
    {{ msg }}
</div>
 const app = new Vue({
el:'#app',
data:{
// 响应式数据
msg:'你好，黑马'  //data中的数据，是会被添加到实例(app)上
    }
})