初识vue
-
vue框架 框架
- 做项目 类似 盖房子
- 使用html css javascript实现相当于最原始方法盖房子 使用框架后相当于使用钢筋混泥土实现 Vue使用一定不会比原生开发复杂 使用简单 原理复杂
-
vue学习 使用vue框架技术操作html标签元素，操作内容，样式，属性，事件
-
第一个vue程序
<script src="../lib/vue.global.js"></script> <script> // 创建vue实例对象 const app = Vue.createApp({ // data选项 定义数据 // 为什么data定义为函数形式： 保证一个vue实例对应一个数据对象 (组件时深入) data() { return { message: '初始vue程序', title:'vue学习' } }, methods:{ plus(){ this->选项对象 }, minus(){ } } }) app.mount("#app") //mount方法 让vue实例与html元素关联 </script>
vue基础
指令: v-开头的特殊属性
-
操作内容 {{变量}} v-html v-text v-pre
-
操作属性 v-bind:属性名=属性值 v-bind:href="url" :src='url'
<!--
操作属性
setAttribute(属性名，属性值)
v-bind:属性名=属性值
简写 :属性名=属性值
-->
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="qianfengurl">千锋</a>
<img :src="headerimg" alt="icon">
</div>
<script>
//创建vue实例
const { createApp } = Vue
const app = createApp({
//定义数据
data() {
return {
url:'http://www.baidu.com',
qianfengurl:'http://www.1000phone.com',
headerimg:'http://test.yuguoxy.com/static/img/index-logo.png'
};
},
})
app.mount('#app')
</script>
-
操作样式 :class="url" :class="{'ative':isative}" :class="['w','h']"
:style="url" :style="{}" :style="[]"
<!--
操作样式
样式是一个特殊属性
class style
v-bind:class
:class="字符串"
:class="{样式名:boolean,样式名2：boolean}"
boolean值为true样式起作用
:class="['样式1'，'样式2'...]"
-->
<style>
.btn {
width: 200px;
height: 40px;
background-color: skyblue;
}
.active {
width: 200px;
height: 40px;
background-color: pink;
color: white;
}
.w{
width: 300px;
}
.h{
height: 50px;
}
.bg{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<button :class="btn" style="color: red">按钮</button>
<button :class="{active:isActive}">按钮2</button>
<p :class="[w,'h','bg']">数组样式</p>
</div>
<script src="../lib/vue.global.js"></script>
<script>
//创建vue实例
const { createApp } = Vue
const app = createApp({
//定义数据
data() {
return {
btn: 'btn',
isActive: true,
w:'w'
}
},
})
app.mount('#app')
</script>
- 操作事件 v-on:事件类型=vue事件处理方法 v-on:click="plus" @click="plus"
<!--
操作事件
v-on：事件类型= vue事件处理方法methods
定义在methods选项中
简写@事件类型=vue事件处理方法
@click="puls"
-->
<style></style>
</head>
<body>
<div id="app">
<!-- <button onclick="alert('helloworld1')">按钮1</button> -->
<button v-on:click="plus">加一</button>
<button @click="minus">减一</button>
</div>
<script src="../lib/vue.global.js"></script>
<script>
//创建vue实例
const { createApp } = Vue
const app = createApp({
//定义数据
data() {
return {
count:0
}
},
// 定义方法
methods: {
plus() {
console.log('plus方法')
},
minus(){
console.log('minus方法');
}
},
})
app.mount('#app')
</script>
- this关键字 选项对象，操作data选项中数据和methods方法
<!--
this关键字
表示vue选项对象
通过this可以操作data选项中的数据和methods选项中的方法
-->
<style></style>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<button v-on:click="plus">加一</button>
<button @click="minus">减一</button>
</div>
<script src="../lib/vue.global.js"></script>
<script>
//创建vue实例
const { createApp } = Vue
const app = createApp({
//定义数据
data() {
return {
count:0,
title:'vue中 this关键字',
message:'hello'
}
},
// 定义方法
methods: {
plus() {
console.log('plus方法',this.title)
this.count++
// this.minus()
},
minus(){
console.log('minus方法');
this.count--
},
},
})
app.mount('#app')
</script>
- 小示例 计数加一减一
<div id="app">
<p>{{num}}</p>
<button @click="onpuls">加1</button>
<button @click="onminus">减1</button>
</div>
<script src="vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
num: 2,
}
},
methods:{
onpuls(){
this.num++
},
onminus(){
this.num--
}
}
}).mount('#app')
</script>
响应式原理
- Object.propropery()
<div id="app">
<p></p>
<button onclick="onPlus()">加一</button>
<button onclick="onMinus()">减一</button>
</div>
<script>
let data = {
count: 0,
}
const divELe = document.querySelector('#app>p')
divELe.innerHTML = data.count
// 将data数据 通过Object.defineProperty方法转变成具有getter和setter方法的新对象,
// 新对象数据变化，自动getter和setter方法,
// 数据劫持
let vm = {}
for (const key in data) {
Object.defineProperty(vm, key, {
get() {
return data[key]
},
set(newValue) {
data[key] = newValue
divELe.innerHTML = newValue //更新界面
},
})
}
function onPlus() {
vm.count = vm.count + 1
}
function onMinus() {
vm.count = vm.count - 1
}
</script>
- Proxy 代理
<div id="app">
<p></p>
<button onclick="onPlus()">加一</button>
<button onclick="onMinus()">减一</button>
</div>
<script>
let data = {
count: 0,
}
const divELe = document.querySelector('#app>p')
divELe.innerHTML = data.count
//创建代理对象
const proxy = new Proxy(data,{
get(target,propery){
return target[propery]
},
set(target,propery,newvalue){
target[propery] = newvalue
divELe.innerHTML = newvalue
}
})
function onPlus() {
proxy.count++
}
function onMinus() {
proxy.count--
}
</script>
指令
- 双向数据绑定 v-model
v-model指令
表单数据操作
data选项数据 -> input表单绑定
data选项数据 <- input表单数据
data选项数据 <- > input表单数据 表单双向数据绑定
input输入框内容更改 data选项数据自动更新
1. 获取input输入框数据
- 监听input事件或change事件
- 获取输入框内容
event.target.value
2. 赋值给inputValue
checkbox
v-model
checked属性值 <-> checked
input输入框
输入框内容
value 属性值 <-> inputValue
radio
seleted下拉选择框
option选中元素 <-> seletedvalue
