01.vue的基础介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 胡子语法,存储的是在data里面定义的属性 -->
{{msg}}
<p>{{txt}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello world!',
txt:'我是p标签',
}
})
</script>
</html>
02.vue中的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
}
.div2{
width: 100px;
height: 100px;
background-color: rgb(18, 232, 125);
}
</style>
</head>
<body>
<div id="app">
<!-- 通过使用指令的方法实现数据的渲染 -->
<!-- v-text 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- v-html 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- 总结: v-text和v-html的区别: v-html可以解析标签 -->
<div class="div1" v-text="msg"></div>
<div class="div2" v-html="txt"></div>
<hr>
<div class="div1" v-text="tag"></div>
<div class="div1" v-html="tag"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello world!',
txt:'我是p标签',
tag:'<h1>我是标题一</h1>'
}
})
</script>
</html>
03.vue中的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: rgb(124, 13, 242);
}
.div2{
width: 100px;
height: 100px;
background-color: rgb(225, 7, 196);
}
</style>
</head>
<body>
<div id="app">
<!-- 通过使用指令的方法实现数据的渲染 -->
<!-- v-if 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- v-show 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- v-if/v-show 作用就是用来显示或者隐藏元素 -->
<!-- 总结: v-if和v-show的区别: v-if直接移除元素 v-show只是添加隐藏元素的属性-->
<div class="div1" v-if="isShow"></div>
<div class="div2" v-show="isShow"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello world!',
txt:'我是p标签',
tag:'<h1>我是标题一</h1>',
isShow:true,
}
})
</script>
</html>
04.vue中的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: rgb(124, 13, 242);
}
.div2{
width: 100px;
height: 100px;
background-color: rgb(225, 7, 196);
}
</style>
</head>
<body>
<div id="app">
<!-- 通过使用指令的方法实现数据的渲染 -->
<!-- v-for 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- 作用:循环输出你需要的内容 -->
<div v-html="title"></div>
<ul>
<!-- <li>苹果</li>
<li>香蕉</li>
<li>橘子</li> -->
<!-- <li v-for="item in arr">{{item}}-----{{arr}}</li> -->
<!-- 注意:item代表的是数组中的每一项,此时这个item的名字是可以更换的 -->
<!-- 注意: index这个参数是可以省略的,具体要看你的业务需求 -->
<li v-for="(item,index) in arr">{{item}}---{{index}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
title:'<h1>你喜欢的水果是什么呢?</h1>',
arr:['苹果','香蕉','橘子'],
}
})
</script>
</html>
05.vue中的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 200px;
height: 200px;
background-color: rgb(124, 13, 242);
}
</style>
</head>
<body>
<div id="app">
<!-- 通过使用指令的方法实现数据的渲染 -->
<!-- v-click 的缩写就是: @click 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- 作用:点击元素实现效果 -->
<!-- 需求:点击这个按钮让下面的p标签显示或者隐藏 -->
<!-- 分析:隐藏显示元素需要使用指令 v-show/v-if -->
<button v-text="btn" @click = 'change()'></button>
<p v-show="isShow"></p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
content:'<h1>显示隐藏这个元素</h1>',
btn:'按钮',
isShow:false,
},
methods:{
change(){
this.isShow = !this.isShow;
}
}
})
</script>
</html>
06.vue中的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: rgb(46, 235, 36);
}
</style>
</head>
<body>
<div id="app">
<!-- 通过使用指令的方法实现数据的渲染 -->
<!-- v-bind 的缩写就是: :class 书写位置:在标签中间与书写属性的位置是一致的-->
<!-- 作用:给元素绑定属性 -->
<div :class="div12"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
div12: 'div1'
},
})
</script>
<script>
</script>
<!--
下午内容:
1.组件使用
2.路由使用
3.vue的脚手架使用
-->
</html>
</script>
</html>
07.vue中组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
<v-one></v-one>
<v-two></v-two>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('vOne',{
template:'<p>我是注册的全局组件</p>'
})
Vue.component('vTwo',{
template:'<h3>我是注册的全局组件3333</h3>'
})
let vm = new Vue({
el:'#app',
data:{
msg:'下午好!'
}
})
</script>
</html>
08.vue中组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
<v-one></v-one>
<v-two></v-two>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '下午好!',
},
methods:{},
components: {
vOne: {
template: '<div>我是局部注册的</div>'
},
vTwo:{
template:'<h1>这是标题一</h1>'
}
}
})
</script>
</html>
09.vue中组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
li:nth-child(1){
background-color: pink;
}
li:nth-child(2){
background-color: orange;
}
li:nth-child(3){
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
<v-one></v-one>
</div>
<!-- 创建组件模板 -->
<template id="temp1">
<div>
<!-- 要书写导航 -->
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '下午好!',
},
methods:{},
components: {
vOne: {
template: '#temp1'
},
vTwo:{
template:'<h1>这是标题一</h1>'
}
}
})
</script>
<!--
组件使用总结:
1.全局组件
在vue实例的上面创建Vue.component('组件名称',{ template:'<tag>内容</tag>'})
全局组件可以创建N多个,但是每次创建需要重复上面的操作
2.局部组件
方法一:在vue实例的配置项上创建一个components的配置项,{组件名:{template:'页面内容'}}
方法二:在vue实例的配置项上创建一个components的配置项,{组件名:{template:"模板id名称"}}
模板的位置:app的下面新建一个template标签,标签的名字就是模板的id名字
注意: 一个template中只能有一个根元素
-->
</html>