当前位置:首页 > 程序开发 > Web > VUE3快速入门(4)——Setup语法糖与数据绑定

VUE3快速入门(4)——Setup语法糖与数据绑定

bnbplayer12个月前 (04-13)Web2771

扫描二维码推送至手机访问。

版权声明:本文由行者无疆发布,如需转载请注明出处。

本文链接:http://xinz.run/post/8.html

标签: VUE
分享给朋友:

“VUE3快速入门(4)——Setup语法糖与数据绑定” 的相关文章

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

本博客使用的是由拓源 推出的“纯净主题”。目前发现一个由于IP查询接口触发的问题,导致主题需要显示IP归属地的页面(如留言、评论页等)会出现如下错误: 经检查,该主题的 tpure_IP函数使用了一个“https://whois.pconline.com.cn/ipJson.jsp” 接口查询IP归属地,但该接口不稳定,时常返回空,所以触发了上述问题。修改方式如下: 1 定位到函数在该主题的安装目录下(位置:/zblog的安装目录/zb_users/theme/tpure),打开includes.php 在编辑器中按“Ctrl+F”搜索函数:tpure_IP。找到如下代码: function tpure_IP($ip) { $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; } 2 更换查询接口,实现自己的解析方式在function tpure_IP($ip)代码前增加函数ip_parser($ip),完整代码如下: function ip_query($ip) { $url = "https://opendata.baidu.com/api.php?query={$ip}&co=&resource_id=6006&oe=utf8";//此处使用百度API $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $ip_obj = json_decode($location, true); if(0 != count($ip_obj['data']) && array_key_exists('location', $ip_obj['data'][0])) return $ip_obj['data'][0]['location']; else return '未知'; } 注意,该代码一定要放在tpure_IP函数的前面。 3 注释原来的代码,调用新的函数将tpure_IP函数体内的代码全部用/**/注释,并在最后添加ip_query的调用代码,如下: function tpure_IP($ip) { /* $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; */ return ip_query($ip); } 相当于不再使用原本的实现,而使用自己的实现,但函数名称不变,保存即可。有动手能力的大佬也可以将API换成其他的,但是解析代码也同样要换。 点击下列链接可以下载本人修改好的文件进行替换。请注意备份好源文件!!!include.php...

VUE3快速入门(10)——路由的基础使用

VUE3快速入门(10)——路由的基础使用

1. 什么是路由路由是指根据不同的URL加载不同的组件,其典型应用是后台页面,点击不同的菜单显示不同的页面。通过使用路由,能实现SPA页面、无刷新加载、部分页面加载的功能,是VUE最为典型的一种功能。 2. 准备工作2.1 搭建导航区与展示区框架本文实现一个功能:导航有三个按钮,分别是“首页”、“新闻”、“关于”。点击三个按钮在展示区显示不同的页面。App.vue代码如下: <template> <!--这是导航区--> <nav> <ol> <li><a href="#">首页</a></li> <li><a>新闻</a></li> <li><a>关于</a></li> </ol> </nav> <!--这是展示区--> <div id="content"></div> </template> 2.2 创建路由视图页在源码目录下新建views目录,用于单独存放路由视图组件,目录内建立Home.vue、News.vue、About.vue,分别对应“首页”、“新闻”、“关于”的具体内容。具体代码略。 2.3 安装路由npm install vue-router 上述代码将会自动安装VUE3的路由组件。 3. 使用路由3.1 定义路由(History模式)在源码目录新建目录router,再创建index.ts文件作为路由定义文件。首先引用路由以及需要使用的路由视图: import { createRouter, createWebHistory } from 'vue-router' //三个准备好的路由视图 import Home from '@/views/Home.vue' import News from '@/views/News.vue' import About from '@/views/About.vue' 其次定义路由,关键是路径与路由视图的对应关系: const router = createRouter({ //路由模式 history: createWebHistory(), //路由映射关系 routes: [ { path: '/home',//路径 component: Home,//加载的组件 }, { path: '/news', component: News, }, { path: '/about', component: About, } ], }) createRouter函数中传入对象的history属性用于指定路由模式为“WebHistory”模式,routes用于指明路径与页面的映射关系,类型为键值对数组。注意:创建路由时,必须指定使用哪一种路由模式。 记得将定义好的路由暴露出去 export default router 3.2 加载路由在main.ts入口文件中,引用定义好的路由,在原始代码基础上新增如下代码: import router from '@/router/index' app.use(router)//注意该代码放在const app = createApp(App)之后 3.3 处理视图首先添加引用:import { RouterLink, RouterView } from ‘vue-router’其次将App.vue的a标签替换为RouterLink组件: <li><RouterLink to="/home">首页</RouterLink></li> <li><RouterLink to="/news">新闻</RouterLink></li> <li><RouterLink to="/about">关于</RouterLink></li> 最后在原本要展示内容的位置写上RouterView标签:<RouterView></RouterView> 最终效果:在页面上点击三个按钮,可以看到浏览器地址的路径在变化,同时页面展示区显示了三个按钮对应的页面。 4. 更换路由模式(Hash模式)在上述示例代码中使用了History模式,现在替换为Hash模式。修改路由定义文件@/router/index.js更改引用: import { createRouter, createWebHashHistory } from 'vue-router' //... 更改创建路由的代码: const router = createRouter({ history: createWebHashHistory(),//此处修改为了createWebHashHistory //... }) 此时浏览器中出现了一个“/#/”部分。 5. RouterLink组件“to”属性的两种写法5.1 字符串写法见前文。 5.2 对象写法5.2.1 对象的路径属性代码如下: <li><RouterLink :to="{path:'/home'}">首页</RouterLink></li> <li><RouterLink :to="{path:'/news'}">新闻</RouterLink></li> <li><RouterLink :to="{path:'/about}">关于</RouterLink></li> 该写法传入了一个包含path属性的对象。 5.2.1 对象的名字属性(命名路由)修改路由定义文件,增加name属性: //@/router/index.ts const router = createRouter({ history: createWebHashHistory(), routes: [ { name: 'home', path: '/home', component: Home, } //... ], }) 将对象写法的path属性改为name即可: <li><Rout...

VUE3快速入门(11)——路由的嵌套与传参

VUE3快速入门(11)——路由的嵌套与传参

1. 嵌套路由1.1 什么是嵌套路由嵌套路由是指一个路由视图中又包含一个路由视图,通常用于多级分类的SPA。比如一个新闻SPA,分为板块与列表二级。单击不同的板块出现不同的文章列表,再点击列表则出现新闻正文。本文基于上一节内容增加新闻列表和新闻详情的展示功能。 1.2 创建显示新闻详情的视图组件在“@/views/”路径下,新增一个Content.vue组件,HTML部分如下: <template> <div id="detail"> <h2>新闻标题</h2> <p>这是新闻的具体内容</p> </div> </template> 1.2 定义新闻数据修改上一节的News.vue代码的ts部分,增加新闻数据: <script lang="ts" name="News" setup> import { ref } from 'vue'; const news_data = ref([ { id: 1, title: '新闻1', content: '新闻内容1' }, { id: 2, title: '新闻2', content: '新闻内容2' }, { id: 3, title: '新闻3', content: '新闻内容3' }, { id: 4, title: '新闻4', content: '新闻内容4' } ]); </script> 1.3 新增子路由定义在路由定义文件的新闻路径下增加一个子路由: import Content from '@/views/Content.vue'//新增引入 const router = createRouter({ history: createWebHashHistory(), routes: [ //... { name: 'news', path: '/news', component: News, //增加children属性,注意为数组 children: [ { name: 'content', path: 'content',//注意:子路由无需再用“/” component: Content, }], }, //... ], }) 1.4 修改新闻列表视图修改News.vue的HTML部分如下: <template> <h1>新闻列表</h1> <div id="warpper"> <!-- 左侧新闻列表 ---> <div id="list"> <ul> <li v-for="item in news_data" :key="item.id"> <p><RouterLink :to='{path: "/news/content"}'>{{ item.title }}</RouterLink></p> </li> </ul> </div> <!-- 右侧新闻内容 --> <div id="content"> <RouterView></RouterView> </div> </div> </template> 注意二级路由的写法。 修改完成后,可以在新闻导航内看到左侧的新闻列表,点击链接在右侧展示的新闻内容。 2. 路由传参上述代码中点击每个新闻链接展示的内容都一样,现在需要根据链接展示不同的新闻,该功能需要用路由传参来实现。 2.1 Query传参路由定义文件见前文。 2.1.1 直接字符串拼接(不推荐)修改New.vue的RouterLink组件调用代码: <p> <RouterLink :to='`/news/content?title=${ item.title }&content=${ item.content }`'>{{ item.title }}</RouterLink> </p> 注意VUE的字符串模板语法:`…${变量名1}…${变量名2}…`。修改Content.vue的代码,取参数:ts部分: import { useRoute } from 'vue-router'//引入useRoute import { toRefs } from 'vue'//响应式 const route = useRoute() const { query } = toRefs(route)//从useRoute中解构query属性,该属性保存了传递的参数。 html部分: <template> <div id="detail"> <!-- 从query属性获取title参数--> <h2>{{ query.title }}</h2> <!-- 从query属性获取content参数--> <p>{{ query.content }}</p> </div> </template> 注意:由于是直接把传递的参数进行动态显示,所以在解构时需要转换为响应式类型。或者不解构,则写法为: <...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。