欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 会展 > 初步认识vue

初步认识vue

2025/10/9 0:49:14 来源:https://blog.csdn.net/qq_64669006/article/details/140934916  浏览:    关键词:初步认识vue

介绍:

vue是一种自下而上的渐进式框架,当实现简单的应用时,只需一个轻量小巧的核心库;当实现复杂的应用时,可以引入各式各样的Vue插件

Vue特点:

1. 遵循MVVM模式

2. 编码简洁,体积小,运行效率高,适合移动/PC端开发

3. 它本身只关注UI,可以引入其它第三方库开发项目

Vue周边库:

vue-cli:vue脚手架

vue-resource

axios

vue-router:路由

vuex:状态管理

element-ui:基于vue的UI组件库(PC端)

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>
<stype>
//样式
</stype>
<body><!-- 1.创建一个容器 --><div id="app"></div>
</body>
<!-- 引入核心库 -->
<script src="../js/vue.min.js"></script>
<script>// 2.创建一个Vue实例 let vm = new Vue({data() {return {str: "<h2>这是Vue中的数据</h2>", //string}}})// 绑定视图vm.$mount("#app");
</script>
</html>

Vue创建实例的方式:

使用后面的方式

由于数据前端和后端是相通的,前端数据改动会影响后端数据,但是如果我们不想改后端数据怎么办呢

前面就是一个全局唯一实例

第二个是每次调用都new一个

创建实例的同时绑定视图
new Vue({el:"#app", // 绑定视图data:{ //数据模型str:"这是Vue中的数据"}
})// 写法二 先创建实例,再绑定视图
// 创建实例
let vm = new Vue({data() {return {str: "<h2>这是Vue中的数据</h2>", //string}}
})
// 绑定视图
vm.$mount("#app");

常用的语法:

插值语法{{}}:

用来传递后台数据显示到前端的

<body><div id="app"><!-- 插值语法 {{数据}} --><div>{{str}}</div><div>{{num * 2}}</div><div>{{bol}}</div><div>{{arr[1]}}</div><div>{{obj.uname}}</div><div>{{obj.phone}}</div></div>
</body>
<script>data() {return {str: "这是Vue中的数据", //stringnum: 10,bol: true,arr: ["1111", "2132", "吼吼吼"],obj: {uname: "saggg",phone: "1231123432123"}}}})vm.$mount("#app");
</script>

v-show和v-if

v-show:

1.css层面控制元素的显示和隐藏,当状态为false时,元素隐藏,但依然存在,只是在当前元素上设置了display:none

2.当频繁切换状态时使用

使用场景:背景音乐,下拉列表,点击弹窗...

v-if:

1.真正的条件渲染,当状态为true时,元素创建,当状态为false时,元素直接销毁

2.不频繁切换状态时使用

使用场景:条件判断...

<body><div id="app"><div v-show="strIsShow">{{str}}</div> <div v-if="strIsShow">{{str}}</div> <hr><!-- v-if条件判断 --><div v-if="surpriseMoney <= 2000000">give you 1000</div><div v-else-if="surpriseMoney > 2000000 && surpriseMoney <= 3000000">give you 2000</div><div v-else-if="surpriseMoney > 3000000 && surpriseMoney <= 4000000">give you 3000</div><div v-else>nothing~~</div></div>
</body>
<script src="../js/vue.min.js"></script>
<script>let vm = new Vue({data(){return{str:"我无我无我无我无为?",strIsShow:false,surpriseMoney:4000000}}})vm.$mount("#app")
</script>

v-bind,指令用来单向绑定数据

使用v-bind来进行操作,实现数据的动态更新和响应式渲染。‌

<style>.bg{background-color: aqua;}
</style>
<body><!-- 1.创建一个容器 --><div id="app"><!-- v-bind指令:单向绑定数据(动态绑定数据)  --><a v-bind:href="aLink">点我跳转</a><hr><!-- 简写 : 代替v-bind:--><img :src="path" alt="" style="width: 200px;"><hr><!-- 动态绑定样式 --><div :class="{bg:bol}">{{str}}</div></div>
</body>
<script src="./vue.min.js"></script>
<script>// 2.创建一个实例let vm = new Vue({data(){return{str:"这是一个div",aLink:"https://www.baidu.com",path:"../img/img01.webp",bol:true}}})vm.$mount("#app")
</script>

v-for遍历

v-for用来循环遍历,包括数组,字符串,甚至对象都可以

<body><!-- 1.创建一个容器 --><div id="app"><!-- v-for指令:循环遍历 --><!-- 循环遍历数字 --><div v-for="item in num">{{item}}</div><!-- 循环遍历字符串 --><div v-for="(item,index) in str">{{item}}--{{index}}</div>    <!-- 循环遍历数组 --><div v-for="(item,index) in arr">{{index}}--{{item}}</div><!-- 循环遍历对象 --> <!-- <div v-for="item in obj">{{item}}</div> --><div v-for="(item,key) in obj">{{item}}--{{key}}</div></div>
</body>
<script src="./vue.min.js"></script>
<script>let vm = new Vue({data(){return{num:10,str:"JavaScript",arr:["元素1","元素2","元素3","元素4"],obj:{uname:"张三",age:50}}}})vm.$mount("#app");
</script>

v-if和v-for的优先级

v-if和v-for的优先级:

v-for的优先级更高;v-if和v-for在同时使用时,需要将v-if放在父元素上使用

原因:如果在li上进行v-if的判断那么就会先遍历v-for,再if判断False,对遍历的结果进行销毁,如果li中有几十上百条数据,那么就会销毁上百次,极大的影响性能,所以在父元素上直接销毁。

<body><!-- 1.创建一个容器 --><div id="app"><ul  v-if="bol"><li v-for="item in arr">{{item}}</li></ul></div>
</body>
<script src="../js/vue.min.js"></script>
<script>let vm = new Vue({data(){return{arr:["列表项1","列表项2","列表项3","列表项4"],bol:false}}})vm.$mount("#app");
</script>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词