VUE学习(一）、基于简单js引入的Vue快速入门——简单实例使用
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。-------------官方
一、hello world
1、引入vue.js
版本：2.x
将下载的vue.js文件引入项目文件中即可开始
<script src="./js/vue.js"></script>
以下案例默认已经引入vue.js文件！！！
下载 Vue Devtools 插件（vue官网有连接，可能需要科学上网）
2、实现hello world案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初识vue</title>
<script src="./js/vue.js"></script>
</head>
<body>
<!--
初识Vue
1.vue工作必须创建一个vue实例，并且传入一个配置对象
2.容器里面的代码依然符合html规范
3.容器里面的代码被称为Vue模板
4.vue实例和容器是一一对应关系
5.真实开发中只会有一个Vue实例，并且配合组件一起使用
6.一旦data中的数据发生改变，那么模板中用到的该数据地方也会改变
7.{{xxx}},xx是js表达式，并且xx可以自动获取data中的所有数据
8.{{xxx}} xxx还可以时Vue对象中的所有内容
-->
<div id="root">
<!-- 花括号里可以写js表达式和js语句 -->
<h2>hello {{name.toUpperCase()}}</h2>
<h2>年龄：{{age}}</h2>
<h2>{{'时间戳：'+Date.now()}}</h2>
<h2>{{3>2}}</h2>
<h2>{{msg}}</h2>
</div>
<script>
//设置不能有提示 vue.js开发版会在控制台输出一些提示信息
Vue.config.productionTip = false;
//创建vue实例，参数{}为配置对象
//vue实例和容器是一一对应关系
new Vue({
el: "#root", //el用于指定当前vue实例为哪个容器服务，通常为CSS选择器字符串，也可以是document.getElementById()
data: {
// data 用于存储数据供 Vue实例的容器使用
name: "I_LOVE_make_bug",
age: 18,
msg: "Hello World!"
}
});
</script>
</body>
</html>
二、模板语法
1、插值语法
**{{xxx}}**两个嵌套的大括号中间放入Vue实例中的数据，或者js表达式等等这类方法称为插值语法
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模板语法</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
插值语法{{}}
-->
<span>{{name}}</span>
<p>我的名字是{{name}}，我在{{school.name}}读书，它位于{{school.address}}</p>
</div>
<script>
Vue.config.productionTip = false//阻止提示
new Vue({
el:"#root",
data:{
name:'百度',
url:'http://www.baidu.com',
school:{
name:'xxx大学',
address:'山东省，淄博'
}
}
})
</script>
</body>
</html>
2、指令语法
指令语法是利用各种指令如：v-bind、v-if等实现某些共能（数据绑定、点击、遍历等，这里暂时了解即可）
<body>
<div id="root">
<!--
插值语法{{}}
-->
<span>{{name}}</span>
<!--
v-bind 可以简化为 : eg---- :x ,x是自定义属性
这类为指令语法
v-bind 表示绑定一个值
-->
<a v-bind:href="url" :x="url">这是一个连接</a>
<br>
<a v-bind:href="url.toUpperCase()" :x="url">这是一个连接</a>
<p>我的名字是{{name}}，我在{{school.name}}等你</p>
<p>它位于{{school.address}}</p>
</div>
<script>
Vue.config.productionTip = false//阻止提示
new Vue({
el:"#root",
data:{
name:'百度',
url:'http://www.baidu.com',
school:{
name:'xxx大学',
address:'山东省，淄博'
}
}
})
</script>
</body>
实例1和实例2合起来的效果展示
三、数据绑定
<body>
<!--
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
-->
<!-- 准备好一个容器-->
<div id="root">
<!-- 普通写法 -->
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'I_LOVE_MAKE_BUG'
}
})
</script>
对于上述的例子可能这样并不能很好的地看懂，此时就要用到之前提到的Vue Devtools插件，安装好以后在浏览器控制台会有一个vue选项，他就是这个插件给我们提供的调试vue的组件
点击vue选项进入
点击<Root>,此时就会出现vue实例对象包含的数据，我们可以对数据进行修改
1、测试双向绑定
1、在控制台修改数据，发现无论是单项还是双向都发生了变化
2、在页面修改数据双向绑定数据，同样无论双向还是单项都发生了变化
结论：双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
2、测试单项绑定
单项绑定只需要测试页面输入时控制台是否变化
结论：单向绑定(v-bind)：数据只能从data流向页面。
四、el与data的两种写法
<body>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。 即：el:'元素选择器'
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
即：new Vue()等于一个实例,实例.$mount('元素选择器')
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//el的两种写法
/* const v = new Vue({
//el:'#root', //第一种写法
data:{
name:'I_LOVE_MAKE_BUG'
}
})
console.log(v)
v.$mount('#root') //第二种写法 */
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
/* data:{
name:'I_LOVE_MAKE_BUG'
} */
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'I_LOVE_MAKE_BUG'
}
}
})
</script>
五、MVVM模型理解
<body>
<!--
M模型(model):对应data中的数据
V视图(view):模板
VM视图模型(ViewModel):Vue实例
1.data中的所有数据最后都出现在了vm上
2.vm上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
-->
<div id="root">
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "山东理工大学",
address: "山东省，淄博市，张店区"
}
});
</script>
</body>
六、数据代理
1、回顾Object.defineProperty()
1）、 Object.defineProperty()语法说明
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(obj, prop, desc)
- obj 需要定义属性的当前对象
- prop 当前需要定义的属性名
- desc 属性描述符
存取描述符 --是由一对 getter、setter 函数功能来描述的属性
get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。
测试一些属性：
<script type="text/javascript" >
let number = 18
let person = {
name:'张三',
sex:'男',
}
//给person设值了一个age字段
Object.defineProperty(person,'age',{
value:18,
//enumerable:true, //控制属性是否可以枚举，默认值是false
//writeable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
// get(){
// console.log('有人读取age属性了')
// return number
// },
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
// set(value){
// console.log('有人修改了age属性，且值是',value)
// number = value
// }
})
console.log(Object.keys(person))
console.log(person)
</script>
2、何为数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
3、vue中的数据代理
<body>
<!--
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'xx理工大学',
address:'高老庄'
}
})
</script>
七、事件处理
1、事件基本使用
<body>
<!--
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
-->
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!-- v-on:clic=>@click -->
<button v-on:click="showInfo">点击提示信息1</button>
<button @click="showInfo1">点击提示信息2</button>
<button @click="showInfo2($event,3)">点击提示3</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "xx理工大学"
},
methods: {
showInfo(e) {
console.log(e.target.innerText)
console.log(this) //此处的this就是Vue实例对象
},
showInfo1:(e)=>{
console.log(this); //此处的this是windows对象,所以一般不用箭头函数
},
showInfo2(e,id){
console.log(e)
console.log(`学生id为${id}`)
}
}
});
</script>
</body>
浏览器中打开依次点击三个按钮，结果如下图所示
2、常用事件修饰符
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
代码测试
<body>
<div id="root">
<h1>欢迎来到{{name}}</h1>
<!-- 阻止默认事件(常用) .prevent-->
<a href="http://www.baidu.com" @click.prevent="showInfo">点击提示信息</a>
<!-- 阻止冒泡 -->
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "xx理工大学"
},
methods: {
showInfo(e) {
//e.preventDefault(); //阻止默认事件的一种方法
alert("同学你好");
}
}
});
</script>
<style>
* {
padding: 10px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: aqua;
}
.list {
width: 200px;
height: 200px;
background-color: aqua;
overflow: auto;
}
.list li {
height: 100px;
}
</style>
<div id="app">
<button @click="hello('冬冬')">冬冬</button>
<button v-on:click="hello('瑾瑾')">瑾瑾</button>
<button @click="num++">计数</button>{{num}}
<!--
冒泡(事件传播)：点击子元素，会触发父元素的点击事件
(点击a，会触发div2，div1的点击事件)
使用 v-on:事件.stop阻止事件传播 v-on.click.stop
v-on:事件.prevent阻止本身事件
v-on:事件.self只能点击本元素才能触发点击事件
v-on:事件.once只会触发一次
以及更多示例在vue官网
-->
<div @click.once="hello('div1')" style="width: 400px; height: 200px; background-color: aqua">
div1区域
<div @click.stop="hello('div2')" style="width: 200px; height: 150px; background-color: blueviolet">
div2区域
<br />
<a
@click.stop.prevent="hello('div3')"
href="http://www.baidu.com"
style="display: block; width: 150px; height: 100px; background-color: brown">
链接区域3</a>
<br/>
</div>
</div>
<!--
事件捕获
.capture
-->
<!--
点击div2 会先输出div1,再输出div2
事件在不获阶段就开始执行
-->
<div class="box1" @click.capture='showMsg("div1")'>
div1
<div class="box2" @click='showMsg("div2")'>div2</div>
</div>
<!--
事件的默认行为立即执行,无需等待事件回调执行完毕
-->
<!-- 滚动条滚动 -->
<ul @scroll="scroll" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 鼠标滚轮滚动 -->
<ul @wheel.passive="scroll" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--
滚动：当发生滚动时并没有立即使滚动条滚动，而是去处理滚动事件
当事件处理完毕，才会去处理默认事件
解决 :passive (用于优化)
--></div>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
hello(body) {
console.log(`${body},你好呀！`);
},
showMsg(msg) {
console.log(`输出${msg}`);
},
scroll() {
for (let i = 0; i < 10000; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
//console.log("滚动了")
}
}
});
/*
v-on用来绑定事件
语法：v-on:事件名
简写：eg：v-on:click ---> @click
*/
</script>
</body>
3、vue中的键盘事件
<body>
<!--
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后又释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）eg:@keydown.13 不要用
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 也不是很推荐
6.@keydown还可以链式书写eg：@keydown.ctrl.y (ctry+y)
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo" />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13; //定义了一个别名按键
new Vue({
el: "#root",
data: {
name: "xx大学"
},
methods: {
showInfo(e) {
console.log(e.key, e.keyCode);
console.log(e.target.value);
}
}
});
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
