Vue2入门

一位很懒的用户

于 2023-10-20 15:57:14 发布

阅读量40

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_64917259/article/details/133868596

版权

Vue2官网：Vue.js

一、Vue的概念

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

什么是构建用户界面？----------------------就是基于数据渲染出用户可以看到的界面

什么是渐进式框架？-------------------------不一定要把vue所有的API学完才能开发

什么是框架？----------------------------------就是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码

二、Vue2入门

核心四步骤：

1.准备容器（例如：div）

    //这个是容器，Vue所管理的范围，这里将来会编写一些用于渲染的代码逻辑
    <div id="app">

    </div>

2.引包(可以去官网找)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

3.创建Vue实例

<script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'，
        msg2:'Yes~I am so good'
      }
    })
 </script>

el: 指定挂载点，指定 Vue 管理的是哪个盒子，后面#app表示的就是id名为app的容器，如果写了“.app”那么就是表示类名为app的容器，建议用id

data：提供数据

4.指定配置项，渲染数据

有了data提供的数据，我们可以用Vue提供的插值表达式来渲染出data中的数据，在容器中用两个花括号扩起来，在里面直接写上变量名，例如当我们要在页面中渲染msg，就可以这么写

    <div id="app">
      {{msg}}
    </div>

运行程序，我们就可以在页面中看到渲染出来的数据了

完整代码：

<!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>
    <div id="app">
      {{msg}}
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg2:'Yes,I am so good'
      }
    })
  </script>
</body>
</html>

三、插值表达式

插值表达式语法：{{ 表达式 }}

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

什么是表达式？-------------------------表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

正确语法：

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

错误用法：

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

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

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

一位很懒的用户

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue2入门

有了data提供的数据，我们可以用Vue提供的插值表达式来渲染出data中的数据，在容器中用两个花括号扩起来，在里面直接写上变量名，例如当我们要在页面中渲染msg，就可以这么写。-------------------------表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果。-----------------------------------------------------------什么是构建用户界面？----------------------插值表达式语法：{{ 表达式 }}
复制链接

扫一扫