vue
1.Vue介绍
Vue使用
文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
js中的数据,展示在页面上,相当于原生js中的innerText方法
原始HTML
双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用
本指令相当于原始html
Attribute 绑定
v-bind来修改标签的属性,简写用:即可
布尔型 Attribute
同时绑定多个Attribute
使用 JavaScript 表达式
注意:每一个绑定仅支持单一表达式,也就是一段能够被求值的javascript代码(语句不可以)
调用函数
可以在绑定的表达式里面调用函数
<p>
生成一个随机数{{Math.random()}}
</p>
computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{reverseStr}}</p>
<ul>
<li>{{this.text.split('').reverse().join('')}}</li>
<li>{{this.text.split('').reverse().join('')}}</li>
<!--上面两行,同样的功能要计算两次,下面用计算属性更好 -->
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
</ul>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
text:'Hello,world!',
}
},
computed: { //这里一定要指定this.text this指的是当前实例,可以理解为data里的数据
reverseStr() {
return this.text.split('').reverse().join('')
}
}
}).mount('#app')
</script>
</body>
</html>
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<button v-on:click="increment()">+</button>
<button @click="increment()">+</button>
<button @click="increment(5)">+5</button>
<button v-on:click="jdd()">-</button>
<button @click="jdd()">-</button>
<button @click="jdd(5)">-5</button>
<button @click="jdd(6)">-6</button>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
count: 0
}
},
computed: { //计算属性
},
methods: { //方法
increment(a = 1) {
this.count = this.count + a
},
jdd(b = 1) {
this.count = this.count - b
}
},
}).mount('#app')
</script>
</body>
</html>
计算属性VS方法
注意:计算属性和方法,在结果上确实是相同的,然而不同之处在于
计算属性会基于响应式依赖而被缓存.一个计算属性仅仅会在其响应式依赖更新时才会被重新计算.
条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-if="type==='A'">AAAAA</li>
<li v-else-if="type==='B'">BBBBB</li>
<li v-else-if="type==='C'">CCCCC</li>
</ul>
<p v-show="seen">现在你看得到我</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
type: 'B',
seen: true
}
}
}).mount('#app')
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) of books" :key="index">
<!-- key一般是数据库里面的数据上唯一且不重复的主键-即ID-->
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
books: [
{id: 0, name: '三体', price: 68},
{id: 1, name: '平凡的世界', price: 89},
{id: 3, name: '三国演义', price: 48}
]
}
}
}).mount('#app')
</script>
</body>
</html>
表单输入绑定
基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<p>{{text}}</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
text:'Hello,world!'
}
}
}).mount('#app')
</script>
</body>
</html>
多行文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<textarea name="" id="" v-model="message" ></textarea>
多行文本
<p style="'white-space:pre-line">{{message}}</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
message:''
}
}
}).mount('#app')
</script>
</body>
</html>
单向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="ipt"></label>
<input type="checkbox" id="ipt" :checked="checked">数据单向绑定,data驱动ui,ui不可以修改data
<p>{{checked}}</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
checked:false
}
}
}).mount('#app')
</script>
</body>
</html>
双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="ipt"></label>
<input type="checkbox" id="ipt" v-model="checked">
<p>{{checked}}</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
checked:true
}
}
}).mount('#app')
</script>
</body>
</html>
将多个复选框绑定到同一个数组或集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>选中的人是:{{checkedNames}}</h2>
<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="John">
<input type="checkbox" v-model="checkedNames" value="Mike">
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
checkedNames:[]
}
}
}).mount('#app')
</script>
</body>
</html>
单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>选中的人是:{{picked}}</h2>
<input type="radio" v-model="picked" value="1">男
<input type="radio" v-model="picked" value="0">女
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
picked: 1
}
}
}).mount('#app')
</script>
</body>
</html>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
selected: ''
}
}
}).mount('#app')
</script>
</body>
</html>
注意
如果
v-model表达式的初始值不匹配任何一个选择项，<select>元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。
多选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
<!-- <option disabled value="">Please select one</option>-->
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
<option>CCCCCCCC</option>
</select>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
selected: []
}
}
}).mount('#app')
</script>
</body>
</html>
修饰符
1.lazy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<input type="text" v-model.lazy="message">
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
message:''
}
}
}).mount('#app')
</script>
</body>
</html>
2.number---如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入
3.trim如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
生命周期
侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text"v-model="message">
<p>{{name}}</p>
</div>
<script>
const {createApp} = Vue
const vm = createApp({
data() {
return {
message:'111',
name:'xxx'
}
},
watch:{
message(){
if (this.message.length>=10) alert('long')
}
}
}).mount('#app')
</script>
</body>
</html>
模板引用
vut之中的dom操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<style>
#test {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<div id="test" ref="test"></div>
<button @click="big">变大</button>
<input type="text" ref="ipt">
</div>
<script>
const {createApp} = Vue
const vm = createApp({
data() {
return {}
},
methods: {
big() {
console.log(this.$refs)
this.$refs.test.style.width = '200px'
}
},
setup() {
console.log(this.$refs)
},
beforeCreate() {
console.log(this.$refs)
},
created() {
console.log(this.$refs)
},
beforeMount() {
console.log(this.$refs)
},
mounted() {
this.$refs.ipt.focus()
}
}).mount('#app')
</script>
</body>
</html>
## vue脚手架
### vue-cli
#### 安装
//首先确保已安装node node -v npm -v \#其次确保npm镜像地址是国内的淘宝镜像（有梯子除外） npm config get registry \#如果结果是：http://registry.npmmirror.com/，则说明是淘宝镜像，否则需要改成淘宝，命令如下： npm config set registry http://registry.npmmirror.com/ \#再次安装vue-cli，命令如下： npm i -g @vue/cli \#查看vue-cli安装版本 vue -V
#### 基于vue-cli创建vue3.0项目
vue create hello-world #项目名称必须小写英文字母 Manally select features #手动选择分支 Babel #仅选择babel （上下键切换，空格选择/取消,回车确认） choose a version for Vue? #3.x where do you ? #In dedicated config files保存到另外文件中，即不保存到package.json中(package.json内容够多了) Save this as a preset? #No 不保存为未来分支 Loading...... cd hello-world npm run serve \#复制网址到浏览器打开即可
#### 基于vue-cli vueUI常见项目
非常不建议使用，丢人！
### 基于Vite常见Vue项目
基于vite，不需要安装，只要有node和npm即可，但是node版本要在15.0以上
npm init vue
项目目录 vue-project --.vscode 配置vscode，没用 --node_modules --public --src 关键，程序员学的代码都在这里面 ----assets 项目所需的静态文件，图片，css等 ----components 组建文件夹 ----App.vue 根组件 ----main.js --.gitigonre git上传时，不要的文件配置 --index.html 页面，仅包含一个#app --package.json --package-lock.json --README.md --vite.config.js vite配置文件
组件
组件是vue这种框架的基石,最重要的部分.
新建组件
在vite创建的项目中,创建组件:
在components文件夹下,右键新建.vue文件,就是一个组件
<template>
<p>
这里面写标签
外层的template仅作辅助编译,将来生成的html界面中,不存在template标签
</p>
<div>
在过去,vue2中这里的跟标签必须仅仅一个(即template的亲儿子只能有一个),vue3不做限制.
</div>
</template>
<script >
//这里面写js
exprot default{ //对外暴露,ES6模块化语法,等同于node中commonJs中的module.exports
name:'HelloWorld',
data(){
return{
message:''
}
},
methods:{
}
}
</script>
<style scoped>
/*这里是css
这里的scoped,通过给被选中的标签加上独一无二的随机属性名,来让当前css仅在本组件中生效
*/
</style>
引入组件
在父组件中引入组件
<template>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue' //编辑器可能会把.vue省略,一定会更要加上,如果在vue-cli里面可以不加.vue后缀,vite中一定要加上.
export default {
name: "Header-1",
}
</script>
<style scoped>
</style>
注册组件
注册组件分两种,分别为局部组件和全局组件
注册局部组件(常用)
<template>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue' //编辑器可能会把.vue省略,一定会更要加上,如果在vue-cli里面可以不加.vue后缀,vite中一定要加上.
export default {
name: "Header-1",
components:{
HelloWorld
}
}
</script>
<style scoped>
</style>
注册全局组件
main.js
import { createApp } from 'vue'
import App from './App.vue'
import Header1 from './components/Header-1.vue'
createApp(App).component('Header1',Header1).mount('#app') //全局注册
使用组件
父组件中
<template> <HeaderWrold></HeaderWrold> <HeaderWrold/> <header-wrold></<header-wrold>d> <header-wrold> </template>
注意当组件之中没有内容,才可以改写成但标签形式
父传子Props
在很多时候,同一份数据要在父子组件中都使用,而这份数据,来自于后端,两个组件各自像后端请求同一份数据是不合理的,严重浪费接口资源.
所以我们往往是父组件请求到数据之后,传一份给子组件,要使用Props.
新建父子组件,
数组形式
子组件
<template>
<p>{{title}}</p>
</template>
<script>
export default {
name: "SonOne",
props:['title'], //5.显式声明要接受的Props
created() {
console.log(this.title)
}
}
</script>
<style scoped>
</style>
父组件
<template>
//3.使用
<SonOne :title="message">
</SonOne>
//4.在父组件调用子组件时,在组件内添加属性,上面是用v-bind绑定了data数据,下面是直接属性+数据
</template>
<script>
import SonOne from "./SonOne.vue"; //1.引用
export default {
name: "FatherOne",
components:{SonOne}, //2.注册
data(){
return{
message:'Hello Props'
}
}
}
</script>
<style scoped>
</style>
假如要穿入多个props
则父组件
<SonOne :title="message" :count="count">
对象形式
props:{
title:String,
count:Number
},
父组件
<template>
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<SonOne v-for="book of booksList" :book="book"/>
</tbody>
</table>
</template>
<script>
import SonOne from "./SonOne.vue";
export default {
name: "FatherOne",
components: {SonOne},
data() {
return {
booksList: [
{id: 0, name: 'pfsj', count: '1'},
{id: 1, name: 'wdsj', count: '1'},
{id: 2, name: 'zhygds', count: '1'},
],
}
}
}
</script>
<style scoped>
</style>
子组件
<template>
<tr>
<!-- <td>{{book.id}}</td>-->
<!-- <td>{{book.name}}</td>-->
<!-- <td>{{book.count}}</td>-->
<td v-for="item of book">
{{item}}
</td>
</tr>
</template>
<script>
export default {
name: "SonOne",
props: ['book']
}
</script>
<style scoped>
</style>
浙公网安备 33010602011771号