Vue-01

最新推荐文章于 2024-07-11 10:59:33 发布

rcj15651130122

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量54

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/rcj15651130122/article/details/132046292

版权

一、vue是什么

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

Vue2官网：

Vue.js

1.构建用户界面：基于数据动态渲染出用户看到的页面

2.渐进式：循序渐进，学一点开发一点

3.框架：一套完整的项目解决方案，有一套必须让开发者遵守的规则或者约束

库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts、jQuery等

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

下图是库和框架的对比：

优点：大大提升开发效率(70%以上)

缺点：需要理解记忆规则——>官网

vue的两种使用方式：

1.vue核心包开发

场景：局部模块改造

2.vue核心包&vue插件工程化开发

场景：整站开发

二、创建Vue实例，初始化渲染(4步)：

1. 准备容器 (Vue所管理的范围)

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

3. 创建Vue实例 new Vue()

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

el指定挂载点

data提供数据

<!-- 不是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>

vue的特点：

1：不需要直接操作dom

2 ：数据驱动试图(数据变，视图自动更新)

3：面向数据编程

三、插值表达式 {{}}

插值表达式是一种Vue的模板语法，我们可以用插值表达式渲染出Vue提供的数据

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

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

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

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

<h3>{{title}}<h3>

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

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

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

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

3.错误用法

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

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

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

四、vue指令：带有 v- 前缀的特殊标签属性

vue会根据不同的指令，针对标签实现不同的功能

v-html：设置元素的innerHTML，可以动态解析标签

v-html：把内容渲染在元素内部相当于原生js的innerHTML

    <div v-html="msg"></div>
  </div>
  
  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <h3>学前端~来黑马！</h3>
        `
      }
    })

v-text 把内容渲染在元素内部相当于原生js的innerText，不解析标签

v-show 通过css的display: none 达到元素隐藏元素始终被创建

v-show底层原理：切换 css 的 display: none 来控制显示隐藏

<div v-show="score>=90">{{ score }}</div>

v-if 条件渲染值为true显示元素 false隐藏元素

v-if 底层原理：根据判断条件控制元素的创建和移除（条件渲染）

<div v-if="score>=90">{{ score }}</div>

建议使用频繁显示或隐藏元素用v-show 其他用v-if

v-else v-else-if="表达式"

作用：辅助v-if 进行判断渲染

注意：需要紧挨着v-if一起使用

<body>
  
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

</body>

v-on

作用：注册事件 = 添加监听+提供处理逻辑

语法：

1.v-on:事件名="内联语句"

2.v-on:事件名="methods中的函数名"

3.简写：@事件名

4.调用传参

<body>
  <div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>
</body>
<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app4 = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn () {
          // 让提供的所有methods中的函数，this都指向当前实例
          // console.log('执行了fn', app.isShow)
          // console.log(app3 === this)
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>

<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
          this.money -= price
        }
      }
    })
  </script>
</body>

v-bind:属性名="表达式" 简写 :属性名="表达式"

1.作用：动态的设置html的标签属性—> src url title...

<body>
  <div id="app">
    <!-- v-bind:src   =>   :src -->
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })

  </script>
</body>

v-for：基于数据循环，多次渲染整个元素(数组、对象、数字)

遍历数组语法：

v-for = "(item,index) in 数组名"

item：每一项，index：下标

省略index：v-for = "item in 数组名"

<body>

  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item, index) in list">
        {{ item }} - {{ index }}
      </li>
    </ul>

    <ul>
      <li v-for="item in list">
        {{ item }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲']
      }
    })
  </script>
</body>

v-for中的key：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

注意点：

1.key的值只能是字符串或数字类型

2.key的值必须具有唯一性

3.推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)

<body>

  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="(item, index) in booksList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <!-- 注册点击事件 →  通过 id 进行删除数组中的 对应项 -->
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del (id) {
          // console.log('删除', id)
          // 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)
          // filter: 根据条件，保留满足条件的对应项，得到一个新数组。
          // console.log(this.booksList.filter(item => item.id !== id))
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>

v-model = "变量"：可以让数据和视图，形成双向数据绑定

(1) 数据变化，视图自动更新

(2) 视图变化，数据自动更新

可以快速[获取]或[设置]表单元素的内容

<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login () {
          console.log(this.username, this.password)
        },
        reset () {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>

注意：new Vue()中的数据，要想在上面挂载的div盒子容器中使用，直接使用；如果想要在函数中使用，需要在前面加上this

rcj15651130122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-01

注意：new Vue()中的数据，要想在上面挂载的div盒子容器中使用，直接使用；框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。v-text 把内容渲染在元素内部相当于原生js的innerText，不解析标签。v-for中的key：给元素添加的唯一标识，便于vue进行列表项的正确排序复用。v-for：基于数据循环，多次渲染整个元素(数组、对象、数字)v-html：设置元素的innerHTML，可以动态解析标签。v-for = "(item,index) in 数组名"
复制链接

扫一扫

Vue-01

“相关推荐”对你有帮助么？