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