005 vue

2024-08-21 04:12
文章标签 javascript vue frontend 005

本文主要是介绍005 vue，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • vue常用指令
    • 01 vue-helloworld.html
    • 02 v-if与v-show.html
    • 03 v-on.html
    • 04 v-for.html
    • 05 v-bind.html
    • 06 v-model.html
  • vue的生命周期
  • vue组件化开发思想
  • 使用vue脚手架进行模块化开发
    • index.html
    • main.js
    • App.vue
    • Hello.vue
    • index.js

Vue官方文档
https://cn.vuejs.org/
Vue开源项目汇总
https://github.com/opendigg/awesome-github-vue
Vue.js中文社区
https://www.vue-js.com/

https://webpack.docschina.org/
https://vuejs-templates.github.io/webpack

npm install vue@2.6.12

vue常用指令

01 vue-helloworld.html

<!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>
<body><div id="app"><!--获取vue对象中的data里面的值--><input type="text" v-model="num"/><button v-on:click="num++">点赞</button><button v-on:click="cancle">取消</button><h1>{{name}}，开发好用，有{{num}}个开发者购买</h1></div>
</body><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el: "#app",//绑定元素data: {//封装数据name: "macPro",num: 1},methods: {//封装方法cancle(){this.num --;}},});
</script></html>

02 v-if与v-show.html

<!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>
<body><div id="app"><!-- 获取vue对象中data里的数据 --><p v-if="isShow">我是v-if数据</p><p v-show="isShow">我是v-show数据</p></div><!-- 引入vue.js文件 --><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el: '#app',data: {isShow: false}});</script>
</body>
</html>

03 v-on.html

<!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>
<body><div id="app"><button v-on:click="count++">增加1</button><!-- 对v-on指令，可以使用 @符号替代--><button @click="count++">增加1</button><!-- 调用add方法，当前count值+1--><button @click="add">增加1</button><!-- 调用total方法，传入当前的count值--><button @click="total(count)">执行total方法</button><!-- 点击回调只会触发一次--><button @click.once="doThis">只会触发一次</button><p>上面的按钮总被点击了{{count}}次</p></div>
</body>
<!-- 引入vue.js文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>let vm = new Vue({el: '#app',data:{count:0},methods: {add:function(){this.count++;},total:function(num){console.log("累计点击次数"+num);console.log("total方法执行了");},doThis:function(){console.log("doThis方法执行了，只能执行一次");}}});
</script>
</html>

04 v-for.html

<!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>
<body><div id="app"><p v-for="(item, index) in list">{{item}}----{{index}}</p><p v-for="person in persons">{{person.name}} --- {{person.age}} --- {{person.gender}}</p></div>
</body>
<!-- 引入vue.js文件--><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{list:['迪丽热巴','古力娜扎','欧阳娜娜'],persons:[{name:'老王',age:38,gender:'男'},{name:'热巴',age:26,gender:'女'}]}});</script>
</html>

05 v-bind.html

<!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>
<body><div id="app"><font size="5" v-bind:color="color1">拼多多</font><font size="5" :color="color2">京东</font><hr><a :href="'https://'+url">跳转网站</a></div>
</body>
<!-- 引入vue.js文件--><script src="../node_modules/vue/dist/vue.js"></script>
<script>let vm = new Vue({el:'#app',data:{color1: 'blue',color2: 'red',url:'www.jd.com'}});
</script>
</html>

06 v-model.html

<!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>
<body><div id="app">用户名:<input type="text" id="username" v-model="user.username"><br>密 码:<input type="password" id="password" v-model="user.password"><br><input type="button" @click="func" value="提交数据"></div>
</body>
<!-- 加入vue.js文件--><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el: '#app',data: {user: {username:'',password:''}},methods: {func(){console.log(this.user.username,this.user.password);//对数据的值 再次赋值进行更新this.user.username="tom123";this.user.password="456"}}});</script>
</html>

vue的生命周期

vue⽣命周期可以分为⼋个阶段，分别是：
beforeCreate（创建前）、created（创建后）、beforeMount(载⼊前)、mounted（载⼊后）、
beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）
如果想在⻚⾯加载完毕后就要执⾏⼀些操作的话，可以使⽤created和mounted钩⼦函数

<!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>Document</title>
</head><body><div id="app">{{message}}</div><script src="./node_modules/vue/dist/vue.js"></script><script>const vm = new Vue({el: '#app',data: {message: 'Vue的⽣命周期'},beforeCreate: function () {console.group('------beforeCreate创建前状态------');console.log("%c%s", "color:red", "el : " + this.$el);//undefinedconsole.log("%c%s", "color:red", "data : " +this.$data); //undefinedconsole.log("%c%s", "color:red", "message: " +this.message);//undefined},created: function () {console.group('------created创建完毕状态------');console.log("%c%s", "color:red", "el : " + this.$el);//undefinedconsole.log("%c%s", "color:red", "data : " +this.$data); //已被初始化console.log("%c%s", "color:red", "message: " +this.message); //已被初始化},beforeMount: function () {console.group('------beforeMount挂载前状态------');console.log("%c%s", "color:red", "el : " +(this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " +this.message); //已被初始化 },mounted: function () {console.group('------mounted 挂载结束状态------');console.log("%c%s", "color:red", "el : " + this.$el);//已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data); //已被初始化console.log("%c%s", "color:red", "message: " +this.message); //已被初始化},beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data);console.log("%c%s", "color:red", "message: " +this.message);},updated: function () {console.group('updated 更新完成状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data);console.log("%c%s", "color:red", "message: " +this.message);},beforeDestroy: function () {console.group('beforeDestroy 销毁前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data);console.log("%c%s", "color:red", "message: " +this.message);},destroyed: function () {console.group('destroyed 销毁完成状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " +this.$data);console.log("%c%s", "color:red", "message: " +this.message)}})// 设置data中message数据值//vm.message = "good...";// 销毁Vue对象//vm.$destroy();</script>
</body></html>

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>
<body><div id="app"><button v-on:click="count++">投币了{{count}}次</button><praise-button></praise-button><praise-button></praise-button><collect-button></collect-button><collect-button></collect-button></div>
</body><!-- 引入vue.js文件--><script src="./node_modules/vue/dist/vue.js"></script><script>//1.VUE全局声明一个组件Vue.component("praise-button",{template:'<button v-on:click="count++">点赞了{{count}}次</button>',data() {return {count:1}}});//2.VUE局部声明一个组件const collectButton = {template:'<button v-on:click="count++">收藏了{{count}}次-----</button>',data() {return {count:1}}}let vm = new Vue({el: '#app',data:{count:1},components:{//声明所定义的局部组件'collect-button':collectButton}});</script>
</html>

使用vue脚手架进行模块化开发

全局安装webpack依赖

npm install webpack -g

全局安装vue脚手架

npm install -g @vue/cli-init

创建⼀个⽂件夹在该路径下执⾏

vue init webpack my-project

运行项目

npm install
npm run dev

访问
http://localhost:8080

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>my-project</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

App.vue

<template><div id="app"><img src="./assets/logo.png"><!--使用router-link组件来导航通过传入'to'属性指定链接<router-link>默认会被渲染成一个<a>标签--><router-link to="/">首页</router-link><router-link to="/Hello">去Hello</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

Hello.vue

<template><div><h1>你好，hello，{{name}}</h1></div>
</template><script>
export default {data() {return {name: 'vue'}}
}
</script><style></style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/Hello',name: 'Hello',component: Hello}]
})

这篇关于005 vue的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1092084。

相关文章

React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2