一、Vue框架
渐进式JavaScript框架,易学易用,性能出色,适用场景丰富的Web前端框架
功能是构建用户界面
基于标准的HTML、CSS和JavaScript,提供了一套声明式的、组件化的编程模型,帮助高效得开发用户界面
1.1渐进式框架
渐进式框架:Vue是一个框架也是一个生态,功能覆盖了大部分前端的常见需求,Vue的设计非常注重灵活性和可以被逐步集成的特点
不同方式使用Vue:
1、无需构建步骤,渐进式增强静态的HTML
2、在任何页面作为 Web components嵌入
3、单页应用(SPA)
4、全栈/服务端渲染(SSR)
5、jamstack/静态站点生成(SSG)
6、开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
1.2 Vue的版本
Vue的版本:开发中Vue可以选择两大版本,Vue2和Vue3,老项目一般Vue2,新项目一般选择Vue3
Vue3涵盖了Vue2的知识体系,当然Vue3增加了很多新的特性
官方文档:cn.vuejs.org
二、VueAPI的风格
主要两种风格:选项式API(Vue2)和组合式API(Vue3)
不同底层提供的两个接口,基础概念和知识是通用的
当生产项目中:
不需要使用构建工具或者在低复杂度的场景中用Vue的时候,推荐用选项式API
当打算用Vue构建完整的单页应用,推荐采用组合式API+单文件组件
三、Vue开发准备工作
查看vue版本
node -v
创建Vue项目
npm init vue@latest
进入项目
cd vue-base
安装
npm install
运行项目
npm run dev
vite.config.js Vue配置文件
package.json 信息描述文件
index.thml 入口html文件
node_modules Vue项目运行的依赖文件
public 资源文件夹
README.md 注释文件
四、模板语法
Vue使用的是基于HTML的模板语法,可以以声明式的将组件实例绑定到DOM中,所有的VUE语法都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解释
文本插值
双大括号进行数据绑定文本插值
每个绑定支持单一表达式
<template>
<p>{{msg}}</p>
<p>{{hello}}</p>
<p>{{num+1+2+3}}</p>
<p>{{ok?'Yes':'No'}}</p>
<p>{{message.split("").reverse().join("")}}</p>
</template>
<script>
export default {
data(){
return{
msg:"神奇的语法",
hello:"hello world",
num:10,
ok:'Yes',
message:"大家好呀"
}
}
}
</script>
属性绑定
双大括号不能在HTML attribute中使用 想要响应式绑定一个attribute,应该使用v-bind指令
<template>
<!-- 用v-bind 调整属性 同时可以用:简写 undefined 那么就是消除对应的属性-->
<div v-bind:class="dynamicClass" v-bind:id="dynamicId" :title="dynamicTittle">{{msg}}111</div>
<!-- 一次性绑定多个-->
<div v-bind="objectOfAttrs"></div>
</template>
<script>
export default {
name: "HelloWorld",
data(){
return{
msg:"hello world",
dynamicClass:"active",
dynamicId:"APPID",
dynamicTittle:undefined,
objectOfAttrs:{
class:"appclass",
id:"appid"
}
}
}
}
</script>
条件渲染
<template>
<h3>条件渲染</h3>
<div v-if="flag">
看得见吗?
</div>
<div v-else-if="!flag">
还是看看吧
</div>
<!-- v-show 和 v-if 一样的
但是v-if是真实的按条件渲染 切换的时候对监听器和组件销毁与重建 false不会做任何事 true才会去渲染
v-show简单 无论条件如何都会渲染 只不过改变的是display的属性
v-if 强调的是切换开销 v-show 强调初始渲染开销
频繁切换用v-show 运行时捆绑条件少用v-if
-->
<div v-show="flag">
看得见吗?
</div>
</template>
<script>
export default {
data(){
return{
flag:false
}
}
}
</script>
<style scoped>
</style>
列表渲染
<template>
<h3>列表渲染</h3>
<p v-for="item in names" v-bind:key="item">{{item}}</p>
<!-- index 是默认的下标-->
<p v-for="(item,index) in names" v-bind:key="(item,index)">{{item}}-{{index}}</p>
<!-- v-for 不仅仅可以遍历数组 也可以遍历对象-->
<div v-for="item in result" v-bind:key="item">
<p>{{item.title}}</p>
<img :src="item.url" :alt="item.id">
</div>
<div v-for="item in result" v-bind:key="item">
<div v-for="(value,key,index) in item" v-bind:key="(value,key,index)">
<p>{{value}}-{{key}}-{{index}}</p>
</div>
</div>
<div v-for="(value,key,index) in user" v-bind:key="(value,key,index)">
<p>{{value}}-{{key}}-{{index}}</p>
</div>
</template>
<script>
export default {
name: "ForDemo",
data(){
return{
names:["a","b","c"],
result:[{
"id":101,
"title":"标题1",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
},{
"id":102,
"title":"标题2",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
},{
"id":103,
"title":"标题3",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
}],
user:{
name:"kewin",
age:18
}
}
}
}
</script>
key管理状态
Vue默认按照就地更新策略渲染元素列表
当顺序改变 vue不会移动dom元素的顺序,而是就地更新,确保原本指定的索引位置上渲染
为了给vue一个提示,方便跟踪每个节点的标识,从而重用和重新排序现有的元素,需要一个key唯一标志属性
四、事件处理
可以使用v-on指令(简写@)监听DOM事件,并且在事件触发的时候执行对应的JavaScript
用法:οnclick=“methodname”或@click=“handler”
事件处理器的值可以是内联事件处理器也可以是方法事件处理器文章来源:https://www.toymoban.com/news/detail-696976.html
定义事件
<template>
<button @click="count++">AddInline</button>
<button @click="addCount">AddMethod</button>
<p>{{count}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1
}
},
//所有方法函数都放在这里
methods:{
addCount(){
this.count++
console.log(this.count)
}
}
}
</script>
事件参数
事件参数可以获取event对象和通过事件传递参数
vue中event对象就是js的event对象文章来源地址https://www.toymoban.com/news/detail-696976.html
methods:{
addCount(e){
this.count++
console.log(e.target.innerHTML="Add"+this.count)
}
<template>
<button @click="count++">AddInline</button>
<button @click="addCount('hello')">AddMethod</button>
<p>{{count}}</p>
<p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1,
names:["张三","李四","王五"]
}
},
//所有方法函数都放在这里
methods:{
addCount(msg){
this.count++
event.target.innerHTML="add"+msg
},
getNameHanlder(item){
console.log(item)
}
}
}
</script>
<template>
<button @click="count++">AddInline</button>
<!-- 可以用&event 传event事件参数 -->
<button @click="addCount('hello',$event)">AddMethod</button>
<p>{{count}}</p>
<p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1,
names:["张三","李四","王五"]
}
},
//所有方法函数都放在这里
methods:{
addCount(msg,e){
this.count++
e.target.innerHTML="add"+msg
},
getNameHanlder(item){
console.log(item)
}
}
}
</script>
事件修饰符
<template>
<h3>事件修饰符</h3>
<!-- 进行修饰 实现点击但是不跳转-->
<a @click.prevent="clickHandle" href="http://www.baidu.com">点击进入连接</a>
<div @click="clickDiv">
<!-- 让事件不冒泡到父元素-->
<p @click.stop="clickP">测试冒泡</p>
</div>
</template>
<script>
export default {
name: "ListenerDemo2",
methods:{
clickHandle(){
console.log("被点击了")
},
clickDiv(){
console.log("DIV")
},
clickP(){
console.log("P")
}
}
}
</script>
<style scoped>
</style>
五、数组变化侦测
<template>
<h3>数组变化侦听</h3>
<ul>
<li v-for="(item,index) of names" :key="index"> {{item}}</li>
</ul>
<!-- Vue可以侦听响应式数组的变更方法 并且在调用的时候触发相关的更新
push() 添加
pop() 取出最上面的一个
shift()
unshift()
splice()
sort()
reverse() 逆置
-->
<button @click="addListHandle1">reverse</button>
<!--
使用替换数组的方法来更新
filter()
concat()
slice()
直接对原数组进行变更
-->
<button @click="addListHandle2">itemupdate</button>
</template>
<script>
export default {
name: "ArrayListenerDemo",
data(){
return{
names:["张三","李四","王五"]
}
},
methods:{
addListHandle1(){
this.names.reverse()
},
addListHandle2(){
//直接this.names.concat(["123"])不会引起UI更新
this.names=this.names.concat(["123"])
}
}
}
</script>
到了这里,关于Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!