搜索到
51
篇与
的结果
-
-
Vue.JS基础以及本地指令：v-text，v-html，v-on，v-show 为了不让这位爷的青春终结，我来日更了。感谢各位的支持。这几天学了点Django，感觉js也得接触下了，于是看到学习站上有一套黑马程序员的4小时快速入门Vue.js的教程，发现Vue.Js似乎挺容易的。Vue.Js官方文档：https://cn.vuejs.org/v2/guide/第一个指令：v-text：设置标签的文本值(textContent)首先如果要在网页中使用Vue.Js的话就得先引用Vue（在官方文档有两句，第一句适合开发环境，会有相应提示，第二句更加的快，适合生成环境）<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>到这里代码就分为两部分了，一部分写在html中，一部分写在JS中（大概就是用过JS渲染HTML内容了）。打开了尘封已久的VS Code，并写入了对于Vue的HelloWorld首先来解释一下这两句话（凭个人感觉理解）：首先是html里面的这句，新建一个div，ID为Lan，为了方便JS操作的时候找得到这个 <!-- www.lanol.cn --> <div id="Lan"> {{ message }} </div>这里应该是新建一个app，vue型的，el是选择中我们之前创建的div，data就是数据，message就是我们要展现的text var app = new Vue({ el: '#Lan', data: { message: 'Hello Vue!' } })首先呢，这个message有两种写法，第一种就是我们刚刚写的Hello Vue这种，用{{}}包围起来，这种写法不会清除原有的内容， <!-- www.lanol.cn --> <div id="Lan"> {{ message }} </div>而另一种写法就是写在标签的属性区，这样写也是可以的。 <!-- www.lanol.cn --> <div id="Lan" v-text='message'> </div>然后我们来对比一下两者的区别。 <!-- www.lanol.cn --> <div id="Lan"> <h2>{{message}}www.lanol.cn</h2> <h2 v-text='message'>www.lanol.cn</h2> </div>由图可以看见，放在{{}}内的www.lanol.cn显示出来了而放在属性区的则看不见了，这就是两者区别了。在这里面你还可以进行字符串的拼接等操作，如果是{{}}直接加就可以了，而属性区则需要一个+号和引号（因为我包含message用的是单引号，所以里面只能用双引号了如果Python一样） <div id="Lan"> <h2>{{message}}www.lanol.cn</h2> <h2 v-text='message'>www.lanol.cn</h2> <h2 v-text='message+"www.lanol.cn"'></h2> </div>然后需要注意的是message内的内容可以是列表、字典等数据类型（用Python的话说）第二个指令：v-html：设置标签的innerhtml（说白了就是用JS写HTMl）这个指令呢就对比着上一个v-text来记录一下。<body> <!-- www.lanol.cn --> <div id="Lan"> <h2 v-text='message'></h2> <h2 v-html='message'></h2> </div> <script> var app = new Vue({ el: '#Lan', data: { message: '<h1>www.lanol.cn</h1>' } }) </script> </body>可以看见使用了v-text的被直接显示出来了，而v-html则被渲染了，就这？就这。第三个指令：v-on：为元素绑定事件（click，dblclick，monseenter）使用方法： <div id="Lan"> <input type="button" value="按钮" v-on:事件名="方法"> <input type="button" value="按钮" @事件名="方法"> </div>var app = new Vue({ el:"#Lan", methods:{ dolt:function(){ } } )}这里有两种写法，第一个是v-on:事件名="方法"，第二个是比较简便的只需要@即可然后这里就只演示一下click的事件<body> <div id="Lan"> <input type="button" value="点击按钮" v-on:click="dolt"> <input type="button" value="点击按钮" @click="dolt"> </div> <script> var app = new Vue({ el: '#Lan', methods: { dolt: function() { console.log("Lan点击了按钮") } } }) </script> </body>到此，三个基本指令已经写完了，发现掌握一个东西的最好办法就是将他自己用文字写一遍，就像我这样写一篇笔记，记录一下。最后这是一个点击就数字就增加或减少的DEMO，过大过小则提示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueJS基本指令学习By：Lan</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="Lan"> <input type="button" value="加" @click="add"> <input type="button" value="减" @click="sub"> <h2>{{num}}</h2> </div> <script> var app = new Vue({ el: '#Lan', data: { num: 1 }, methods: { add: function() { if (this.num > 20) { alert('太大了') } else { this.num++; console.log(this.num) } }, sub: function() { if (this.num <= 0) { alert('太小了') } else { this.num--; console.log(this.num) } }, } }) </script> </body> </html>
-
-
-
给你的网站加上随机一句，一言API调用代码 这个接口由萌创团队开放的，文档地址：点击进入引用代码：<div class="hitokoto" style=" text-align: center; color: grey; "><script type='text/javascript'> $.get("https://v1.hitokoto.cn/",function(data,status){ if (status == 'success'){ $('.hitokoto').text(data.hitokoto+"By:"+data.from); }else{ $('.hitokoto').text('获取出错！'); } }); </script> </div>
-
-
怎么将Z-Blog的缩略图改为远程地址 这两天发现博客首页的缩略图居然一直用的是本地的图片，这就太浪费服务器的空间了，因为本站的图片都是上传到U-file的。然后我就开始翻模板文件。最后在include.php文件里面看到了。那么问题又来了。我虽然学过C#，看过python，但是对PHP可是一脸懵逼呀。一开始我想偷懒，就去这个模板的交流群问，去Z-Blog的社区问。额，似乎然并卵。还是得自己动手，丰衣足食呀。自己用现有的只是分析了一下这些代码function Blogs_thumbnail($id, $sltww, $slthh, $link) { global $zbp, $article; $article = GetPost((int)$id); $random = mt_rand(1, 10); preg_match_all('/<img.*?(?: |\t|\r|\n)?src=['"]?(.+?)['"]?(?:(?: |\t|\r|\n)+.*?)?/>/sim', $article->Content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); //文章中图片数量 $zdsuoluetu = $article->Metas->Blogs_suoluetu; //是否手动设置缩略图？ if (empty($zdsuoluetu)) { // 如果不是吧 if ($n > 0) { //再判断图片数量是否大于0. $sltu = $strResult[1][0]; //如果是则取第一张图片为缩略图 } else { $sltu = "{$zbp->host}zb_users/theme/{$zbp->theme}/image/random/{$random}.jpg"; //否则就在本地目录10张图片内随机选一张作为缩略图 } } else { $sltu = $zdsuoluetu; //缩略图为手动设置的缩略图 } $sltu = "<img src="{$zbp->host}zb_users/theme/{$zbp->theme}/template/timthumb.php?src={$sltu}&w={$sltww}&h={$slthh}&zc=1" alt="{$article->Title}" />"; //这里就是图片地址 if ($link == 1) { $sltu = "<a href="{$article->Url}" title="{$article->Title}">{$sltu}</a>"; } return $sltu; }然后回到首页。检查了一下这些缩略图把链接弄出来大概就是将这张图片经过timthumb.php处理后展现出来。我的远程加速地址是pan.lanol.cn，所以我只要想办法将www换成pan就行了然后我就百度搜索php，菜鸟教程走一波，应该是字符串处理一下就行了，所以这里选择php string有两个替换，区分大小写和不区分大小写。选择不区分吧。然后我就傻乎乎的把这句话复制到代码里面去了。echo str_ireplace("www","pan",$strResult[1][0]);然后刷新。。好吧，我去看下echo的意思才知道这玩意就是输出。。嗯，这是个意外。最终将代码改成了这样子function Blogs_thumbnail($id, $sltww, $slthh, $link) { global $zbp, $article; $article = GetPost((int)$id); $random = mt_rand(1, 10); preg_match_all('/<img.*?(?: |\t|\r|\n)?src=['"]?(.+?)['"]?(?:(?: |\t|\r|\n)+.*?)?/>/sim', $article->Content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); $zdsuoluetu = $article->Metas->Blogs_suoluetu; if (empty($zdsuoluetu)) { if ($n > 0) { $sltu = str_ireplace("www","pan",$strResult[1][0]); } else { $sltu = "{$zbp->host}zb_users/theme/{$zbp->theme}/image/random/{$random}.jpg"; } } else { $sltu = $zdsuoluetu; } $sltu = "<img src="{$zbp->host}zb_users/theme/{$zbp->theme}/template/timthumb.php?src={$sltu}&w={$sltww}&h={$slthh}&zc=1" alt="{$article->Title}" />"; if ($link == 1) { $sltu = "<a href="{$article->Url}" title="{$article->Title}">{$sltu}</a>"; } return $sltu; }完美解决
