本章为超级浓缩版,文章过于短,方便复习使用哦~
下载 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>
.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
},
<p>姓名:{{username}}p>
<p v-text="cover_text">p>
<p v-html="red_p">p>
<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: ""
}
});
<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"
}
});
v-if vs v-show
一般来说,v-if 有更高的切换开销
,而 v-show 有更高的初始渲染开销
。因此,如果需要非常频繁地切换,则使用 v-show较好;如果在运行时条件很少改变,则使用 v-if 较好。
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' }
]
}
})
<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
}
}
})
<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);
}
},
});
<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;
}
}
});
引入 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;
});
该小节是在脚手架中完成的
使用组件三大步骤:
使用 import 语法导入需要的组件
import Left from '@/components/Left.vue'
使用 components节点注册组件
export default {
components: {
Left
}
}
以标签形式去使用刚才注册的组件
<div class="box">
<Left>Left>
div>
拓展: @ 的 注意事项。一般用来代替src
目录。webpack.config.js
:
module.exports = {
resolve: {
alias: {
@: path.join(__dirname,'./src')
}
}
}
注意: 在 script标签
中的 components 注册的组件都是私有子组件,只能在该组件中使用。
在 vue 项目的 main.js
入口文件中,通过 Vue.component()
方法可以注册全局组件。示例代码如下:
// 1. 导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 2. 注册组件
// 参数1: 字符串格式,表示"组件名称"
// 参数2: 需要被全局组成的组件(导入的组件)
Vue.component('MyCount',Count)
props
是 “自定义属性” ,允许使用者通过自定义属性,为当前组件指定初始值 【自定义属性的名字,是封装者自定义的且合法的】
具体用法:
Count.vue :
export default {
// 自定义属性
props: ["init"]
// 数据源
data() {
return {
count:0
}
}
}
在另一个文件 Left.vue 引用
<MyCount init="9">MyCount>
注意:
<template>
<div>
<p>
count 的值: {{ init }}
p>
div>
template>
props 结合 v-bind
- :init 是 其中数字 9 是数字
- 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
}
}
}
Vue 基础语法前面基本已经概况,更多知识请访问官网
介绍 — Vue.js
接下来的学习,就是在脚手架中努力积累经验了。
因为 vue2 比较老、旧,可以采取 vue-cli。
Gitee 代码地址: https://gitee.com/star-dream-f/vue2-study