vue基础一

最新推荐文章于 2024-03-06 19:18:13 发布

VIP文章 dream_of_forget

最新推荐文章于 2024-03-06 19:18:13 发布

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dream_of_forget/article/details/126878512

版权

Vue介绍

Vue 是一套用于构建用户界面的渐进式框架

Vue是一个JavaScript框架
- Vue是一个用于构建用户页面的框架
  - Vue是一个用于构建用户界面得渐进式框架

Vue两个重要特点

1-数据驱动

数据驱动：Vue会根据数据，自动渲染页面

2-组件化开发(盒子复用)

组件化开发：网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件
- 组件化开发好处
  - a. 一次定义，多处使用
  - b. 便于开发维护

Vue基本使用

第三方框架通用的使用步骤

1.导包
2.写HTML结构
3.js中初始化配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 1.导包 -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.写html结构 -->
  <div id="app">
    {
  { message }}
  </div>
  <script>
    //3.初始化vue实例
    const app = new Vue({
      //el 挂载点 告诉vue把数据渲染到哪个盒子上
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>

Vue的挂载点介绍

1.挂载点el作用：告诉vue实例，你要将data中的数据渲染到哪一个视图
2.注意点
- (1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器
  - 开发中基本上都是id选择器，保证HTML标签唯一性
  - 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素，只会选择第一个元素
- (3)挂载点不能设置为html和body标签（程序报错）

<body>
  <!-- 2.HTML结构 -->
  <div id="hm">
    <div class="box">
      {
  { name }}
    </div>

    <div class="box">
      {
  { name }}
    </div>
  </div>

  <script>
    /* 3.初始化配置 */
    let app = new Vue({
      //el 挂载点 告诉vue把数据渲染到哪个盒子上
      /* 
      (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
      (2)如果选择器选中了多个元素，只会选择第一个元素
      (3)如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
      (4)挂载点不能设置为html和body标签 （程序报错）
       */
      el: '#hm',
      //data:数据驱动,vue会自动把data数据渲染到el,而无需dom操作
      data: {
        name: 'ikun',
        age: 30,
        sex: '女'
      }
    })
  </script>
</body>

Vue的插值表达式介绍

1.Vue会自动将data对象中的数据渲染到视图
2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置
3.关于插值表达式一些注意点
- (1) { { }} : 插值表达式，也叫胡子语法
- (2) 插值表达式作用：将数据渲染到页面
- (3) 支持二元运算 { { age + 1 }}
- (4) 支持三元运算 { { age>30?'老男人':'小鲜肉' }}
- (5) 支持数组与对象的取值语法
- (6) 不支持分支语法与循环语法

<body>
  <!-- 2.HTML结构 -->
  <div id="app">
    <p>我的名字是: {
  { name }}</p>
    <p>我的年龄是: {
  { age + 1 }}</p>
    <p>我是一个: {
  { age >= 30 ? '油腻大叔' : '小鲜肉' }}</p>
    <p>我的爱好是: {
  { hobby }}</p>
    <p>我的第一个爱好是: {
  { hobby[0] }}</p>
    <p>我的学生叫做: {
  { student.name }},他现在年龄是: {
  { student.age }}</

最低0.47元/天解锁文章

dream_of_forget

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础一

1.挂载点el作用：告诉vue实例，你要将data中的数据渲染到哪一个视图2.注意点(1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器开发中基本上都是id选择器，保证HTML标签唯一性如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中(2)如果选择器选中了多个元素，只会选择第一个元素(3)挂载点不能设置为html和body标签（程序报错）
复制链接

扫一扫