Vue2 第一次学习

本章为超级浓缩版,文章过于短,方便复习使用哦~

文章目录

    • 1. 简单引入 vue.js
    • 2. 指令
      • 2.1 事件绑定指令 v-on (简写 @)
      • 2.2 内容渲染指令
      • 2.3 双向绑定指令 v-model
      • 2.4 属性绑定指令 v-bind (简写 : )
      • 2.5 条件渲染指令
      • 2.6 循环指令 v-for
    • 3. vue 其他知识
      • 3.1 侦听器 watch
      • 3.2 计算属性 computed
      • 3.3 过滤器 filters
    • 4. axios 基本使用
    • 5. Vue 的组件
      • 5.1 当前文件使用
      • 5.2 全局组件
      • 5.3 自定义属性 props
    • 6. 其他说明

1. 简单引入 vue.js

下载 vue.js : 安装 — Vue.js

<div id="app">
    
    
    {{username}}
div>

<script src="lib/vue.js">script>
<script>
    // 创建Vue实例对象
    var vm = new Vue({
        // 指定要控制的区域
        el: '#app',
        // 要渲染在页面上的数据
        data: {
            username: '张三'
        }
    })
script>

2. 指令

2.1 事件绑定指令 v-on (简写 @)

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<button @click="add(1,$event)">+1button>
add(n, e) {
	// 打印数字
    console.log(n);
    // 事件: e
},

2.2 内容渲染指令

  • v-text
  • v-html
  • 插值表达式 {{ }}
<p>姓名:{{username}}p>
<p v-text="cover_text">p>
<p v-html="red_p">p>

2.3 双向绑定指令 v-model

<div id="app">
    <select v-model="city">
        <option value="">-请选择-option>
        <option value="1">北京option>
        <option value="2">上海option>
        <option value="3">广州option>
        <option value="4">深圳option>
    select>
div>
let vm = new Vue({
    el: "#app",
    data: {
        city: ""
    }
});

2.4 属性绑定指令 v-bind (简写 : )

<div id="app">
    <input type="text" v-bind:placeholder="tipUserName">
    <input type="text" :placeholder="tipPassword">
    <div :style="'background-color: ' + color + ';width: 100%;height:100px'">此时背景颜色:{{color}}div>
div>
var vm = new Vue({
    el: "#app",
    data: {
        tipUserName: "请输入用户名...",
        tipPassword: "请输入密码",
        color: "red"
    }
});

2.5 条件渲染指令

  • v-if
  • v-else-if
  • v-else
  • v-show

v-if vs v-show

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show较好;如果在运行时条件很少改变,则使用 v-if 较好。

2.6 循环指令 v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  li>
ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

3. vue 其他知识

3.1 侦听器 watch

<div id="app">
    <input type="text" class="form-control" v-model="link">
    <p>{{res}}p>
div>
const vm = new Vue({
    el: "#app",
    data: {
        link: "",
        res: ""
    },
    watch: {
        // link(newVal,oldVal){} 不建议
        link: {
            handler(newVal) {
                if (newVal === "") return;
                $.get("https://www.escook.cn/api/finduser/" + newVal, (response) => {
                    this.res = response;
                });
            },
            // 页面加载时,就立即执行监听器
            immediate: true,
            // deep 对象的一些属性也能监听到
            deep: true
        }
    }
})

3.2 计算属性 computed

<div id="app">
	<div>
	    <label for="rgb">rgb:label>
	    <input type="text" name="rgb" id="rgb" v-model="color">
	div>
	<div class="box" :style="{backgroundColor: rgb}">
	
	div>
	<input type="button" value="获取颜色信息" @click="show">
    div>
const vm = new Vue({
    el: "#app",
    data: {
        r: 0,
        g: 0,
        b: 0,
        color: "rgb(0, 0, 0)"
    },
    computed: {
        // 计算属性:定义时方法,使用时属性
        rgb() {
            // return `reg(${this.r},${this.g},${this.b})`
            return this.color
        }
    },
    methods: {
        show() {
            console.log("颜色:" + this.rgb);
        }
    },
});

3.3 过滤器 filters

<div id="app">
    <input type="text" placeholder="请输入..." v-model="text">
    <p>{{text | changeText(1)}}p>
div>
const vm = new Vue({
   el: "#app",
    data: {
        text: ""
    },
    filters: {
        // 第一个参数永远是管道符前面的值
        changeText(val, id) {
            return val + "-----" + id;
        }
    }
});

4. axios 基本使用

引入 js 文件

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

调用 axios 函数

axios({
   method: "get",
    url: "http://www.liulongbin.top:3006/api/getbooks"
}).then((books) => {
    this.bookContent = books.data;
});

5. Vue 的组件

该小节是在脚手架中完成的

5.1 当前文件使用

使用组件三大步骤:

  1. 使用 import 语法导入需要的组件

    import Left from '@/components/Left.vue'
    
  2. 使用 components节点注册组件

    export default {
        components: {
            Left
        }
    }
    
  3. 以标签形式去使用刚才注册的组件

    <div class="box">
        <Left>Left>
    div>
    

拓展: @ 的 注意事项。一般用来代替src目录。webpack.config.js

module.exports = {
 resolve: {
     alias: {
         @: path.join(__dirname,'./src')
     }
 }
}

5.2 全局组件

注意:script标签 中的 components 注册的组件都是私有子组件,只能在该组件中使用。

在 vue 项目的 main.js入口文件中,通过 Vue.component()方法可以注册全局组件。示例代码如下:

// 1. 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 2. 注册组件
// 参数1: 字符串格式,表示"组件名称"
// 参数2: 需要被全局组成的组件(导入的组件)
Vue.component('MyCount',Count)

5.3 自定义属性 props

props 是 “自定义属性” ,允许使用者通过自定义属性,为当前组件指定初始值 【自定义属性的名字,是封装者自定义的且合法的】

具体用法:

Count.vue :

export default {
    // 自定义属性
    props: ["init"]
    // 数据源
    data() {
        return {
            count:0
        }
    }
}

在另一个文件 Left.vue 引用

<MyCount init="9">MyCount>

注意:

  1. props 中的数据,可以 直接在模板结构中使用
<template>
	<div>
        <p>
            count 的值: {{ init }}
        p>
    div>
template>
  1. props 是 只读

props 结合 v-bind

  1. :init 是 其中数字 9 是数字
  2. init 是 其中数字 9 是字符串
<template>
	<div class="left-container">
        <h3>Left 组件h3>
        <hr />
        
        // 使用v-bind 绑定
        <MyCount :init="9">MyCount>
    div>
template>

props 和 数据源 关联

上面只是简单初始化,但是init 和 数据源中的 count 没有进行绑定 ,故还不完善

<script>
	export default {
        // 自定义属性
        props: ["init"]
        // 数据源
        data() {
            return {
                // init 和 count 关联起来
                count:this.init
            }
        }
    }
script>

props 的 default 默认值

在声明自定义属性时,可以通过 default 来定义 属性的默认值 示例代码如下:

export default {
    // 自定义属性
    props: {
        init: {
            // 用 default 属性 定义属性的默认值
            default: 0
        }
    }
}

6. 其他说明

Vue 基础语法前面基本已经概况,更多知识请访问官网

介绍 — Vue.js

接下来的学习,就是在脚手架中努力积累经验了。

因为 vue2 比较老、旧,可以采取 vue-cli。

Gitee 代码地址: https://gitee.com/star-dream-f/vue2-study

你可能感兴趣的:(笔记,前端,学习,vue.js,前端)