一、Vue初体验

员大头硬花生

于 2024-08-27 15:10:21 发布

阅读量477

点赞数 12

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59362850/article/details/141603319

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本笔记跟随黑马程序员学习，全部作为本人上课手敲代码和笔记

一.初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

<!-- 不是Vue管理的范围 -->
<div class="box2">
  box2 -- {{ count }}
</div>
<div class="box">
  box -- {{ msg }}
</div>
-----------------------------------------------------
<!-- Vue所管理的范围 -->
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</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 传智播客',
      count: 666
    }
  })

</script>

  
</body>
</html>

创建Vue的实例，初始化渲染步骤：

1. 准备容器 (Vue所管理的范围) ：就是创建一个div盒子，div里面放入需要渲染的内容

2. 引包 (开发版本包 / 生产版本包) 官网：官方地址-安装 — Vue.js

地址为vue2版本，3版本将地址改为3即可

3. 创建实例

4. 添加配置项 => 完成渲染

const app = new Vue({

el: '#app',

data: {

msg: 'Hello 传智播客',

count: 666

}

el钩子：与容器id绑定，用来指定渲染的盒子

data：数据元素。

二、插值表达式

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

作用：利用表达式进行插值渲染

语法：{{ 表达式 }}

注意点：

1. 使用的数据要存在

2. 支持的是表达式，不是语句 if for

3. 不能在标签属性中使用 {{ }}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  
<!-- 
  插值表达式：Vue的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{{ 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 {{ }}
 -->
<div id="app">
  <p>{{ nickname }}</p>
  <p>{{ nickname.toUpperCase() }}</p>
  <p>{{ nickname + '你好' }}</p>
  <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
  <p>{{ friend.name }}</p>
  <p>{{ friend.desc }}</p>

  <!-- ----------------------- -->
  <!-- <p>{{ hobby }}</p> -->
  <!-- <p>{{ if }}</p> -->
  <!-- <p title="{{ nickname }}">我是p标签</p> -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      nickname: 'tony',
      age: 18,
      friend: {
        name: 'jepson',
        desc: '热爱学习 Vue'
      }
    }
  })


</script>

</body>
</html>

问题回顾：

1.插值表达式的作用是什么？

利用表达式进行插值运算，最后将数据渲染到页面中

2.语法格式？

3.插值表达式的注意点：

①使用的数据要存在（data）

②支持的是表达式，而非语句if...for

③不能在标签属性里面使用