目录
vue的基本使用
导入vue
1.官方下载后script导入
<script src="./vue.js"></script>2.网络导入
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>注意：cdn是一种加速策略，能够快速的提供js文件
初始化vue:
// 初始化Vue
// Vue是导入vue.js的构造函数
// app是调用构造函数的生成的实例化对象
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
})vue的挂载点
1.el:挂载点.告诉Vue要把数据渲染到那个盒子上
(1)挂载点可以是：id选择器、类选择器、标签选择器
(2)如果选择器可以选中多个元素，vue只会渲染第一个
(3)如果希望vue可以渲染多个元素，就可以把多个元素包在一个父盒子中
(4)vue挂载点不可以是body与html标签，否则程序会报错
<body>
<!-- 2.HTML结构 -->
<div id="hm">
{{message}}
<span>{{message}}</span>
</div>
<script>
/* 3.初始化配置 */
let app = new Vue({
// 1.el:挂载点.告诉Vue要把数据渲染到那个盒子上
/*
(1)挂载点可以是：id选择器、类选择器、标签选择器
（2)如果选择器可以选中多个元素，vue只会渲染第一个
(3)如果希望vue可以渲染多个元素，就可以把多个元素包在一个父盒子中
(4)vue挂载点不可以是body与html标签，否则程序会报错
*/
el: '#hm',
// 2.data:数据驱动.Vue会自动把data数据渲染到el,无需dom操作
data: {
message: 'hello Vue!!!!'
}
})
</script>
</body>vue的插值表达式
2.data:数据驱动.Vue自动把data树渲染到el
(1).插值语法:{{数据}}
(2)支持二元,三元运算
(3)支持数组与对象取值语法
<body>
<!-- 2.HTML结构 -->
<div id="app-2">
<p>姓名:{{name}}</p>
<p>年龄:{{age+1}}</p>
<p>我是{{age+1>300 ?'老祖宗':'小子'}}</p>
<p>我的学生:{{stu.name}}</p>
<p>我的学生年龄:{{stu.age}}</p>
</div>
<script>
/* 3.初始化配置 */
const app2 = new Vue({
// 1.挂载点
el: '#app-2',
// 2.data:数据驱动.Vue自动把data树渲染到el
/*
(1).插值语法:{{数据}}
(2)支持二元,三元运算
(3)支持数组与对象取值语法
*/
data: {
name: '开了那',
age: 324,
stu: {
name: '王爱仕达',
age: 99
}
}
})
})
</script>
</body>vue指令
指令 (Directives) 是带有
v-前缀的特殊 attribute。
v-text
a.作用： 设置元素的文本 innerText
b.与插值表达式区别
v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
{{ }} 只会替换当前位置文本
<body>
<div id="app">
<p v-text="message"></p>
<p>我喜欢{{message}}</p>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
el: '#app',
data: {
message: '阿萨大大'
}
})
</script>
</body>v-html
1.v-html指令作用：设置元素的innerHTML
2.v-html指令语法：v-html="值"
3..v-html与v-text区别
v-html：可以解析标签
v-text：不可以解析标签
<body>
<!-- HTML结构 -->
<div id="app" v-html="message"></div>
<!-- 1.v-html指令作用：设置元素的innerHTML
2.v-html指令语法：v-html="值"
3..v-html与v-text区别
v-html：可以解析标签
v-text：不可以解析标签 -->
<script>
/* 创建vue实例 */
let app = new Vue({
el: '#app',
data: {
message: '<h1>阿萨大大</h1>'
}
})
</script>
</body>
v-on(绑定事件)
a.作用： 给元素绑定事件
b.语法：
标准语法： v-on:事件名 = "方法名"
简洁语法： @事件名 = "方法名"
c.注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
<body>
<!-- HTML结构 -->
<div id="app">
<button v-on:click="doclick">点我</button>
<div class="box" v-on:mouseenter="doenter" v-on:mouseleave="doleave"></div>
<hr />
<div class="box" @click="doclick" @mouseleave="doleave" @mouseenter="doenter"></div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {},
//methods:注册事件的方法名
methods: {
doclick() {
alert('点击')
},
doenter() {
console.log('移入');
},
doleave() {
console.log('移出');
},
}
})
</script>
</body>v-bind指令
1.v-bind作用：让原生属性也可以使用vue的数据
(1)默认情况下，只有vue的语法才可以使用data中的数据。
（2)如果希望‘原生属性’也可以使用data中的数据，就可以使用v-bind指令
2.v-bind语法
（1）标准语法：
v-bind：原生属性名=“值"
（2）简写语法：
：原生属性名=“值”
3.v-bind注意点：
(1）标签属性如果没有使用v-bind，则它的值是一个字符串
(2)标签属性使用v-bind，则它的值是一个变量（）
<body>
<!-- HTML结构 -->
<div id="app">
<img src="./images/logo.png" alt="" title='logo' />
<br>
<p>标准写法</p>
<img v-bind:src="imageUrl" alt="" v-bind:title="text" />
<p>简洁写法</p>
<img :src="imageUrl" alt="" :title="text" />
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {
imageUrl: './images/logo.png',
text: '爱仕达多撒多',
}
})
</script>
</body>vue样式绑定
1.v-bind样式绑定：使用v-bind设置class和style属性
2.样式绑定语法：
类名绑定语法
：class="{类名：布尔值，类名：布尔值}”
style绑定语法
：style="{样式名：样式值，样式名：样式值}”
3.注意点：如果类名有-，则需要给类名添加引号
<body>
<!-- HTML结构 -->
<div id="app">
<button @click="flag=!flag">切换样式</button>
<div :class="{greenBorder:flag,'red-box':flag}"></div>
<hr />
<div :class="{ 'blue-box': flag}"></div>
<div :style="{'background-image':bgc}"></div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {
flag: true,
bgc: 'linear-gradient(to right, pink, purple)',
},
methods: {}
})
</script>
</body>v-for指令(列表渲染)
(1)作用：遍历数组，并重复生成对应长度的相同标签
(2)语法： v-for="item in 数组名"
遍历下标： v-for="(item, index) in items"
(3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
<body>
<!-- HTML结构 -->
<div id="app">
<ul v-for="(stu) in list">
<li v-for="(val,key,i) in stu">
{{i+1}}--{{key}}--{{val}}
</li>
</ul>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {
list: [
{ name: '李白', age: 92 ,country:'唐'},
{ name: '王伟', age: 42 ,country:'宋'},
{ name: '张角', age: 32 ,country:'汉'},
]
},
methods: {}
})
</script>
</body>
v-model指令(双向数据绑定)
(1)作用 ： 双向数据绑定 与表单元素value值进行双向绑定
a. 表单元素的值进行了修改，这个变量的值也会跟着修改
b. 这个变量的值进行了修改，表单元素的值也会跟着修改
(2)语法： v-model="变量名"
(3)注意点：
a. v-model只能用于表单元素
b. 变量名要定义在data对象中
<body>
<!-- HTML结构 -->
<div id="app">
<input type="text" v-model="msg" placeholder="请输入姓名">
<p>我的名字是:{{msg}}</p>
<button>点我修改model</button>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg:'',
},
methods: {
},
})
</script>
</body>
vue事件修饰符
1.事件修饰符作用：对事件进行修饰作用（阻止冒泡、阻止默认跳转）
2.语法：@事件类型.事件修饰符=“事件处理函数”
3.常用修饰符总结
（1)阻止表单默认跳转：
@click.prevent="方法名"
（2）键盘enter事件：
@keydown.prevent="方法名"
（2）阻止冒泡：
@keydown.stop="方法名"
<body>
<!-- HTML结构 -->
<div id="app">
<!-- (1)事件冒泡：触发子元素的事件，父元素‘同名事件’会被依次触发 -->
<div class="father" @click="dofa">
我是father
<div class="son" @click.stop="doson">我是son</div>
</div>
<!-- （2)默认跳转：a标签和form表单里面的按钮 -->
<form action="http://www.itheima.com">
<input type="text" placeholder="用户名">
<button @click.prevent="dologin">点我啊</button>
</form>
<!-- （3）输入框键盘事件：默认任何键都会触发 -->
<input type="text" @keydown.enter="dokeydown" placeholder="键盘事件">
</div>
<script>
/* 创建vue实例 */
const app = new Vue({
el: "#app",
data: {},
methods: {
doson() {
console.log('儿')
},
dofa() {
console.log('父')
},
dologin() {
console.log('登录')
},
dokeydown() {
console.log('键盘事件')
}
}
})
</script>
</body>vue事件方法中的this
// （1) dom事件中：事件处理函数中的this指向事件源
// (2)vue事件方法中：this指向vue实例
// （3）vue会把data与methods中的成员 平铺到vue实例中
// 在vue方法中访问data数据：this.属性名
// 在模板中访问data数据：省略this,直接写属性名
// ***data中的数据是响应式渲染：data数据如果变化了，页面会自动更新
<body>
<!-- HTML结构 -->
<div id="app">
<button @click="doclick">点我啊</button>
<button @click="age++,name=name+'是的'">点我 啊啊啊啊</button>
<br />
<p>我的姓名：{{name}}</p>
<p>我的年龄：{{age}}</p>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {
age: 324,
name: '王五'
},
methods: {
doclick() {
console.log(this === app)//true
console.log(this.__proto__.constructor)
console.log(this.__proto__ === Vue.prototype)//true
console.log(this.name)
this.age++
}
}
})
</script>
</body>vue事件参数
// (1)默认情况下每一个事件都有一个默认参数
// (2)事件传参:@click="方法名(实参)"
// (3）如果希望事件传参 + 事件对象同时获取，就可以用$event
// @click="方法名（实参，$event）”
<body>
<!-- HTML结构 -->
<div id="app">
<div class="box">{{stu.Party}}</div>
<br />
<span>{{stu.name}}</span>
<button @click="doDelete($event,stu.id)">删除</button>
<button>编辑</button>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: "#app",
//data: 要渲染的数据
data: {
stu: {
name: '李吉姆',
id: '57687989',
Party: 'republic'
}
},
methods: {
doDelete(e, id) {
console.log(e.target,id)
}
}
})
</script>
</body>