Vue2 第一次学习

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

1. 简单引入 vue.js

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

<div id="app">
    <!-- vue 控制的区域 -->
    <!-- 显示数据:{{}} -->
    {{username}}
</div>
<!-- 导入vue.js -->
<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)">+1</button>

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>

2. 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