一、传统开发方式引入vue.js
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
二、vue指令
指令是带有
v-表达式，当表达式改变后将响应式的影响所作用的DOM。
v-once：在标签里添加这个指令后，标签包裹的变量只会变一次。<p v-once>{{message}}</p>
v-html：使用个指令后，指定的变量将会在输出Html渲染后的内容，而非普通文本 <p v-html="rawHtml"></p>
v-if：根据表达式的真假来插入/移除所作用的元素，<p v-if="true">现在你看到了我</p>
v-show：同v-if类似，但是标签无论是否显示，始终渲染并存在，可同v-else-if ，v-else组合使用。
v-bind：可简写为:，为标签内的属性绑定动态变量，<div v-bind:id="dynamicId"></div>
v-on：可简写为@该指令用来监听 DOM 事件，并在触发时运行指定函数或js代码。<button v-on:click="counter += 1">Add 1</button>，使用.stop事件后，将不会将事件影响到其他dom<button @click.stop="counter += 1">Add 1</button>
v-for：
三、表单双向绑定
v-model：此指令在<input>、<select>、<textarea>等表单标签上创建双向数据绑定
<input v-model="message">
data: {
message: 'Hello Vue!'
}
v-model
四、组件
- 组件是可复用的vue实例，使用Vue.component函数创建全局组件，props定义属性，data定义数据，template定义模板。
- 组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
- 组件可以给标签自定义属性，即prop，可以通过 Prop 向子组件传递数据。
- 插槽用来向组件传递内容，将
<slot></slot>标签放在模板里，可以在引用组件时，组件中间写任意的html标签或文本进行替换。 - 一个组件的模板必须只能有一个根节点。
1. 全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=i, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter tit="title1：">
<h2>我是slot插槽</h2>
</button-counter>
<button-counter tit="b:"></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
props: ["tit"],
data: function () {
return {
count: 0
}
},
template: '<div><button v-on:click="count++">{{tit}}点我{{count}}</button><slot></slot></div>'
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>
<style type="text/css"></style>
</body>
</html>
2. 局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=i, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<testComponent></testComponent>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
testComponent: "<h2>h2...</h2>",
methods: {
},
}
});
</script>
<style type="text/css"></style>
</body>
</html
- 组件文件，需要在vue脚手架里使用
- 创建自定义的
test.vue组件
<template>
<h2 class="red">h2...</h2>
</template>
<script>
export default {
name: 'test',
props:{
msg:{
type:String,
default:"test msg"
}
},
data(){
},
methods:{
}
}
</script>
<style>
.red{color: red;}
</style>
- 在根组件
App.vue里：导入、注册、引用。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<test></test>
</div>
</template>
<script>
import Test from './components/test.vue'
export default {
name: 'App',
components: {
Test
}
}
</script>
<style>
</style>
