021701vue概述基础语法
一、Vue概述
1.什么是vue
官方网站 https://cn.vuejs.org
框架作者 尤雨溪
Vue是一个用于快捷开发前端应用的框架技术，它的特点用于构建用
户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手！
2.vue特点
构建用户界面：替代传统的网页设计开发技术，在项目中高效率构建网页
渐进式：不论是开发单个html页面还是开发多个页面组成的项目，或者基于Node的应用的项目Vue都提供了完善的技术支持
框架：framework，通过集成了html/css/js技术，搭建一套业务完整的包含数据处理流程以及功能函数的工具/代码集合
库：library，一般描述的是函数或其他对象的集合
框架：framework，一般描述的是包含界面，数据处理及功能函数的集合
自底向上逐层应用
关注视图层：Vue只对界面部分的处理进行了完善的支持
项目整合
单页面应用
二、编写第一个vue应用
先在官网下载vue.js
<body>
<div id="app">
<h1> {{ name }} h1>
div>
<h1> {{ name }} h1>
<script src="./vue.js">script>
<script>
// 创建Vue实例，绑定页面中的一个标签
const vm = new Vue({
el: "#app", // 将实例绑定到一个标签上
data: { // 实例中的数据
name: '作者：尤雨溪'
}
})
script>
body>
三、vue第一个数据处理应用
<body>
<div id="app">
输入密码：<input type="text" v-model="passwd"><br />
<p> 密码提取：{{ passwd }} p>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app", // 绑定到制定的标签上
data: {
passwd: "待输入密码"
}
})
script>
body>
四、vue实例选项
创建实例
const vm =new Vue({选项})
1.el:element缩写，表示实例绑定哪个标签，该标签内部的数据由Vue实例管理
2.data：数据的意思，用来声明当前Vue实例管理的所有数据
3.methods：函数、方法的意思，用来声明当前实例管理的所有函数
4.filters：过滤器的意思，用来声明按照条件进行数据处理的函数
5.created()/mounted()/updated()…生命周期选项
6.components：组件的意思，用来声明子组件
const vm=new Vue({
el:"#app",
data:{
name:"Vue 2.x",
version:"2.4"
},
methods: {
say() {
console.log("当前版本：2.4.0")
}
},
filters: {
format(args){
return "拼接字符" + args
}
},
created() {
console.log("当前页面被创建的时候执行一下，处理一些准备数据")
},
components: {
Headers, // 添加页面头部组件
Footers, // 添加页面底部组件
}
})
五、vue基础语法
1.差值表达式
是Vue中一种固定的语法：{{ 变量 }}，用于渲染输出变量的数据
<body>
<div id="app">
<p> {{ info }}p>
<p> {{ "插值表达式输出数据：" + info }}p>
<p> {{ info.toUpperCase() }}p>
<p> {{ reverse(info) }} p>
<p> {{ isLogin ? '尊敬的用户，冬奥会欢迎您' : '先做核酸'}}p>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app",
data: {
info: "hello vue 2.x!",
isLogin: false
},
methods: {
reverse(str) {
return str.split('').reverse().join('');
}
}
})
script>
body>
2.指令
Vue中的一个功能组件，用来封装简单的DOM操作的
Vue中指令都是v-字符开头
v-text： 将数据渲染到指定的标签中进行文本展示
v-html： 将数据渲染到指定的标签中进行解释展示
<body>
<div id="app">
<p> {{ info }} p>
<p v-text="info">p>
<p v-html="info">p>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app",
data: {
info: "谷爱凌
"
}
})
script>
3.v-once
一般和插值表达式或者数据渲染指令结合使用，用于一次性渲染数据
如果页面中有一些数据加载渲染后不再发生变化，可以结合v-once指令进行操作
<body>
<div id="app">
<p v-once> {{ name }} p>
<p v-text="name" v-once>p>
<p v-html="name" v-once>p>//在控制台不可修改
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "哈哈哈"
}
})
script>
body>
4.v-show v-if
v-show：根据判断条件是否为true，设置包含内容的 显示/隐藏
v-if根据判断条件是否为true，设置包含内容的 加载渲染/不加载渲染
v-show：通过display样式控制显示/隐藏
v-if：通过DOM操作加载/不加载控制显示/隐藏
5.v-bind
动态操作标签属性的指令，让标签属性可以接受变量数据
可以简化v-bind:attr="value"为：:attr=“value”
6.v-on
用于给标签添加事件处理的指令
v-on:click="fn"可以简化为@click=“fn”
<div id="app">
<button v-on:click="mySay">点我button>
<button @click="mySay">点我button>
<input type="text" @keyup="record">
div>
<script src="./vue.js">script>
<script>
const vm=new Vue({
el:"#app",
data:{},
methods:{
mySay(){
alertt("用户点击了按钮")
},
record(e) {
console.log("用户输入了数据", e.target.value)
}
}
})
script>
7.v-for
列表渲染指令，循环遍历集合数据，如数组中的多项数据
循环遍历的数据，每一条数据可能发生新增/修改/删除的操作，为了保持数据的状态需要添加一个key属性绑定数据状态
8.v-model
主要用于表单元素，用于数据双向绑定
<div id="app">
输入密码：<input type="text" v-model="passwd"><br />
<p> 密码提取：{{ passwd }} p>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app", // 绑定到制定的标签上
data: {
passwd: "待输入密码"
}
})
script>
9.样式处理
标签的样式处理，一般包含行内样式(属性style)、和外联样式(属性class)完成样式修饰
class样式处理
对象格式：通过变量控制某个样式是否生效
数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式
style样式处理
对象格式
数组格式
<style>
html, body{background:#ddd;}
#title{text-align: center; line-height: 50px;width: 200px;height: 50px;background-color: white; color: black;}
#title.active{background:orangered; color: white;}
.dbg{background: #069;}
.dfont{color: white;}
.dfontsize{font-size: 22px;}
style>
head>
<body>
<div id="app">
<div id="title"
:class="{active:isActive}"
@click="isActive=true">选项卡标题div>
<div :class="[dbg, dfont, dfontsize]">
2022 中国冬奥运会
div>
<hr>
<div style="background-color: orangered;color: white;">哈哈哈div>
<div :style="{backgroundColor:sbackground, color: scolor, fontSize:ssize}">哈哈哈div>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: "#app",
data: {
isActive: false,
dbg: "dbg",
dfont: "dfont",
dfontsize: "dfontsize",
sbackground: "orangered",
scolor: "white",
ssize: "22px"
}
})
script>
body>