Loading

Vue笔记（1）——入门

Day-1 初识Vue及v-bind等指令的使用

前言

为了毕设进行前端学习准备，前端Vue，Ant Design。

一、Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持~~~~类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
引用自vue.js

1.1. 为什么使用Vue

Vue使用MVVM模型

MVVM模型

二、使用Vue

2.1. 引入Vue.js

这里我 从官网直接下载 导入如下
<script src="../vue.js></script>

2.2. Hello Vue

编写hello vue，祝好运！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" >
    <title>helloVue</title>
</head>
<body>
    <div id="app">Hello {{message}}</div>
    
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app', //用于挂载要管理的数据
            data: { 	//定义数据
                message: "Vue"
            }
        })
    </script>

</body>
</html>
<!-- 输出=>Hello Vue -->

这里使用了插值表达式{{ }}（Mustache语法）。创建了 Vue 实例。Vue 包含的 Options 有

  • el：(string | HTML Element)：指定 vue 管理哪个 DOM 元素。
  • data：(Object | function)：一些数据（组件中必须是函数）。
  • methods：(function)：包含需要使用到的一些自定义函数，如按钮响应事件。
  • computed：(function)：计算属性，一般只使用 getter 函数如需 set 函数；
    不加动词的方法，形式和方法大致一样，位于 computed 中。
    主要区别：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。。
    computed: {
  // 简写
  // fullName: function() {
  //   return this.firstName + ' ' + this.lastName 
  // }
  fullName: {
    // 一般不希望set方法 只读属性！
    set(newValue){
      const name = newValue.split(' ')
      this.firstName = name[0]
      this.lastName = name[1]
    },
    get(){
      return this.firstName + ' ' + this.lastName
    }
  }
}
  • 等……

2.3. Vue的生命周期

留个位置以后补充！

2.4. 插值语法

2.4.0. {{ }}（Mustache）

括号内部书写变量名，举个例子<p>{{firstName}}+{{lastName}}</p>。

2.4.1. v-once

只渲染一次数据，不会随着数据的改变而改变。（即随后的渲染中被当作静态内容）

<div id="app" v-once>
  {{message}} 	<!-- data中 message: "hello Vue" -->
  <input type="button" value="改变" @click="message='你好'" />
</div>
<!--点击按钮后页面无变化，但控制台中app.message='你好' -->

2.4.2. v-html

用于将html片段填充显示。

<div id="app" >
  <h2 v-html="url"></h2>
  <!-- data中 url: "<a href='https://www.baidu.com'>百度一下</a>" -->
</div>

浏览器检查元素如下

<div id="app">
  <h2><a href="https://www.baidu.com">百度一下</a></h2>
</div>

2.4.3. v-text

用于将数据填充到标签中，作用于插值表达式类似，++但是覆盖原来的整个内容++。

<div id="app" >
  <h2 v-text="message">你好</h2>
  <!-- data中 message: "Hello" -->
</div>

浏览器检查元素如下，标签中原有的值被覆盖。

<div id="app">
  <h2>Hello</h2>
</div>

2.4.4. v-pre

用于显示原始信息。

<div id="app" v-pre>
    <h2>{{url}}</h2>
    <!-- data中 url: "<a href='https://www.baidu.com'>百度一下</a>" -->
</div>
<!-- 浏览器输出 => {{url}} -->

2.4.5. v-cloak

在Vue解析之前，标签中会存在该属性；在Vue解析之后，该属性会被去除。
可利用

<style>
  [v-cloak] {
    display: none
  }
</style>

在Vue解析前，相关 {{ }} 会被隐藏，而解析后，即用数据插入其中后显示。用来隐藏数据加载过程中的 插值表达式 {{ }} 影响用户体验。
（在以下代码中，虽然延迟1s再执行数据插入，但浏览器中并不显示{{message}}。）

<div id="app" v-cloak>
  {{message}}
</div>

<script>
  setTimeout(() => {	//设置1s延迟
    const app = new Vue({
      el: '#app',
      data: {
        message: "你们好"
      },
      methods: {}
    });
  }, 1000);
</script>

2.5. v-bind（语法糖:）

2.5.1. 绑定基本属性

用于动态绑定标签属性，如 src ， href 等。

<div id="app" v-cloak>
  <a :href="url">这是一个连接</a>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      url: "https://www.baidu.com"
    },
    methods: {}
  });
</script>

2.5.2. 动态绑定class

  1. 对象语法：通过 { } 绑定对象
    <div :class="{classA : isA}"></div>
    • 和普通的 class 同时存在并不发生冲突，会进行合并；
    • 如果内容过于复杂的话，可以放在 methods 中的一个函数中 return 出来；或 computed 中。
  2. 数组语法：通过数组
    <div :class="[classA, classB]">{{message}}</div>
  3. 混合
    <div :class="[classA, { classB: isB, classC: isC }]">

2.5.3. 动态绑定style

  1. 对象语法
    <h2 :class="{key（属性名）: value（属性值或变量）}">{{message}}</h2>
<!--如-->
<div :style="{ fontSize: size + 'px' }"></div>
  2. 数组语法
    <div :style="[styleObjectA, styleObjectB]"></div>

总结

以上第一天学习的内容，总结就是很方便。

posted @ 2021-03-13 13:36  seigann  阅读(67)  评论(0)    收藏  举报