vue学习笔记

vue基础

介绍

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

安装

直接用 <script> 引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

下载 开发版本 包含完整的警告和调试模式

下载 生产版本 删除了警告，33.46KB min+gzip

也可以使用CDN远程文件：

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

使用npm安装

# 最新稳定版 
$ npm install vue

使用命令行工具（CLI）

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

# 全局安装 vue-cli
npm install --global vue-cli
# 检测vue-cli是否安装正确
vue --version
# 运行命令来创建一个myapp的新项目
vue create myapp

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

可以在实例中添加数据：

var vm = new Vue({
  data: {
  }
})

在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。

<div id="app">
    
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            string: "hello world"
        }
    })
</script>

数据渲染

声明式渲染

使用两对花括号进行数据渲染 { { }}

<div id="app">
    {
 {message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "hello world"
        }
    })
</script>

条件渲染 v-if

通过 v-if 指令，判断if中的内容是否为true，从而控制数据是否渲染

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

同 v-if 类似的还有 v-show 指令

<div id="app">
    <p v-show="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

v-show指令用法和v-if几乎一样，区别在于：

v-if 控制元素是否渲染

v-show 控制元素是否显示

列表渲染 v-for

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {
 { todo }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      '学习 JavaScript',
      '学习 Vue',
      '整个牛项目'
    ]
  }
})

v-for 中 v-for="todo in todos" todos代表数据源，todo则是被迭代的数组元素的别名。

v-for 还支持一个可选的第二个参数，即当前项的索引。

    <li v-for="(todo,index) in todos">
      {
 {index+1}}、{
 { todo }}
    </li>

此外v-for也可以循环对象：

<div id="app">
  <ol>
    <li v-for="value in object">
      {
 { value }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2022-01-01'
    }
  }
})

你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {
 { name }}: {
 { value }}
</div>

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {
 { index }}. {
 { name }}: {
 { value }}
</div>

优化列表渲染

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<li v-for="item in todos" v-bind:key="item.id">
	{
 { item }}
</li>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

文本渲染 v-text

<div id="app">
    <p v-text="msg"></p>
    <p v-text="5+3"></p>
    <p v-text="msg+' v-text'"></p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                msg:'这是一个字符串'
            }
        }
    })
</script>

文本渲染 v-html

<div id="app">
    <p v-html="htext"></p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                htext:"<b>这是</b>字符串"
            }
        }
    })
</script>

属性渲染

v-model 指令

v-model 指令在表单控件或者组件上创建双向绑定：

<input v-model="message" placeholder="edit me">
<p>Message is: {
 { message }}</p>

v-model 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-bind 属性绑定

动态地绑定一个或多个属性 (attribute)

<p v-bind:title="msg">{
 {msg}}</p>
<!-- 缩写 -->
<p :title="msg">{
 {msg}}</p>
<!-- 表单的属性绑定 -->
<button :disabled="false">提交</button>
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>

动态绑定class

通过对象方式：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

通过数组方式：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

动态绑定style

通过对象方式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

通过数组方式

可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

事件处理

绑定事件

为元素绑定一个事件，使用 v-on 指令，例如绑定一个单击事件：

<button v-on:click="num++">{
 {num}}</button>
<script>
var vm = new Vue({
    el:"#app",
    data(){
        return {
        	num:1
        }
    }
})
</script>

v-on 也可以简写成：

<button @click="num++">{
 {num}}</button>

响应事件函数

<div id="app">
    <button @click="calc(-1)" :disabled="num<=1">-</button>
    <input type="text" v-model.number="num">
    <button @click="calc(1)" :disable="num >= 999">+</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                num:1
            }
        },
        methods:{
            calc(step){
                // js中使用data中的数据 需使用this
                this.num += step