碎言博客

Vue快速学习笔记(2)Vue中的监听与计算属性

J.sky 2020-02-01 10:31:26 Vue

Vue中的监听

watch 用来监听 Vue 实例中数据的变化,然后可以出发一个事件。 例如,反转字符串:

<script src="assets/plugins/vue.js"></script>
<div id="app">
    <input type="text" v-model="vt">
    <p v-text="nvt"></p>
</div>


<script>
   var vm = new Vue({
        el:"#app",
        data:{
            vt:"",
            nvt:""
        },
        watch: {
            vt:function(val){
                this.nvt=this.vt.split('').reverse().join('')

            }
        },
    })

</script>

除了 watch 选项之外,您还可以使用命令式的 vm.$watch API。

Vue中的计算属性

计算属性和监听有些相似,有的时候作用都差不多吧。

下边的例子就是采用Vue的计算属性,

<div id="app1">
    <p>计算属性</p>
    <input type="text" v-model="vt">
    <p v-text="rtvt"></p>
</div>


<script>


    var vm1 = new Vue({
        el :"#app1",
        data:{
            vt:""
        },
        computed: {
            rtvt:function(){
                return this.vt.split("").reverse().join("")
            }
        },

    })

</script>

感觉计算属性要比监听简单直观些。

Vue快速学习笔记(1)Vue实例基础

J.sky 2020-01-10 21:18:43 Vue

Vue.js 简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

第一个Vue实例

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>

<div id="v1" v-bind:title="title">
{{ msg }}
<p v-text="vtext"></p>
<div v-html="vhtml"  v-on:click="alt"></div>

<input type="text" v-model="tx">
<p v-text="tx"></p>
</div>

<script>
    var v = new Vue({
        el: "#v1",
        data:{
            msg:"Hello Vue!",
            title:"试试把鼠标放上去。",
            vtext:"我是通过v-text绑定的数据",
            vhtml:"<h1>哈哈哈字是不是好大?",
            tx:"v-model绑定数据,修改试试吧"
        },
        methods:{
            alt :function(){
                alert("是不是有提示了?")
            }
        }
    })
</script>

这是一个声明式渲染 {{ msg }} 类似于模板便签被插在HTML中。 v-text,v-html 是另外两种数据绑定方式。

v-bind:title Vue中的特殊指令,可以简写为 :title ,

v-on:click 绑定点击事件

v-model 可以双向绑定数据,试试修改程序中的数据。

MVVM

MVVM是一种架构模式,并非一种框架,是一种思想,一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

在MVVM中,View和View Controller是联系在一起,可以把它们视为一个组件,View和View Controller都不能直接引用Model,而是通过引用视图模型(ViewModel),ViewModel是存放View Controller所需要数据的地方(View Controller敢要,ViewModel就敢给),使用MVVM会轻微的增加代码量,但总体上减少了代码的复杂性、耦合性。

使用碎言静态博客依托码云Pages搭建自己的免费博客

J.sky 2020-01-08 19:17:37 碎言博客

star

介绍

碎言这个名称取自与"碎言片语",码兄累了吗?累了就休息一下,为未来的自己留下一些碎言片语吧。 演示: 碎言博客



安装

首先克隆下载碎言静态博客

可以通过 git clone https://gitee.com/J_Sky/suiyan.git 下载,也可以通过下载.zip压缩包下载后解压缩即可。

创建码云代码仓库

登录码云注册账号,然后开始创建自己的代码仓库用来存放博客的页面。

1. 创建



填写相关选项创建一个新的代码仓库



2.关联本地代码仓库

如果你对 Git 操作非常了解,可以跳过此步骤。

进入你本地博客的根目录: 先配置 Git 的基本信息

$ git config --global user.name "你的名字或昵称"
$ git config --global user.email "你的邮箱"

然后绑定远程代码仓库下边的仓库地址换成你刚刚建好的代码仓库的远程地址

$ git init 
$ git remote add origin https://gitee.com/用户个性地址/HelloGitee.git

3.创建你的第一篇博客

在终端进入你的本地博客目录运行

python z.py

这个时候会打印一些关于 z.py 命令行的一些帮助信息,仔细看看可以了解一些基本操作。

未完待续

今天是个好日子发行了碎言静态博客的功能完整版

J.sky 2020-01-08 16:10:47 碎言博客

发布了碎言静态博客的功能完整第一个版本

经过这段时间的努力,终于把博客成功的更换成了自己开发的碎言静态博客,也算是对这段时间学习JavaScript的一个总结。 后续还要继续开发维护,添加一些使用的功能,目前来说,对这个版本最大的满意就是界面的美化和网站的加载速度。 后续还会继续优化。

未来需要添加的功能

  • 支持在线一件换肤。
  • 更好的拓展功能。
  • 更实用的功能。
  • 吸引更多的程序员兄弟前来提交代码。

加油2020!!

前端项目构建打包的一些学习笔记

J.sky 2020-01-01 21:09:54 JavaScript

遇到的问题

由于项目总是有一些小BUG,回想了一下项目中的JS文件的组织问题,估计应该是JS文件分散造成的加载不稳定,有时会造成一些变量莫名的未定义,事已至此,只有将这些文件打包到一个文件中就可以很好的解决这个问题,但是今天在网上搜了一些都是最近流行的打包工具,感觉功能过于丰富,以当前的项目来说用这些流行的打包工具有些大材小用了,而且学习成本高了一些,后来看了一下手头上的两JavaScript本书都推荐 Ant 打包,所以决定按书上的来吧,省时省力。

项目目录结构

书上说项目主要有三个目录:

  • bulid 用来放置最终构建的文件,理想情况下这个目录不应该提交
  • src 用来存放所有的源文件,包括用来进行文件分组的子目录
  • test 测试文件。

Ant打包

ant的安装教程很多,这里就不在重复了。

前端构建需要明白自己要做的是什么,其实打包构建的工具很多的,但是有些打包工具的功能太多了,学习成本很大的,所以选择适合的工具也是很重要的。

ant通过配置 build.xml 来执行一系列 target ,任务的类型选择很多,依据目前项目的选择,有打包,校验,压缩等。

这里就不在贴代码了,具体可以查看 suiyan 根目录下的 build.xml 参考,网上的教程也很多的。

config.json详细说明

J.sky 2019-12-31 13:35:18 碎言博客

config.json 详解

  • blog_name : 博客名称
  • blog_author : 站长昵称
  • blog_description : 站长简介
  • meta_description : meta
  • meta_keywords : meta keys
  • profile_image : 站长头像
  • blog_sns : SNS分享
  • nav : 博客导航
  • blog_list : 首页加载博文篇数

SNS中的ico图标采用的 font-awesome-4.07 ,图标搜索地址如下: http://www.fontawesome.com.cn/faicons/ ,只需填写图标名称即可。

碎言静态博客

J.sky 2019-12-31 10:26:39 站长源创

碎言静态博客

star

介绍

碎言这个名称取自与"碎言片语",码兄累了吗?累了就休息一下,为未来的自己留下一些碎言片语吧。

演示(码云): 碎言博客

演示(github): 碎言博客



软件架构

前端使用了 jQuery,bootstrap4,font-awesome-4.07,highlight.js,less,jQuery.toTop等技术框架。

本地构建博客索引使用了 Python 的相关技术,实现了全站静态页面,并可以通过标题进行全站搜索。

博客文章写作采用Markdown技术支持,让你专注写作更流畅。

博客的管理支持终端和图形界面:

图形界面:

python3 w.py

终端:

可以根据自己的喜好进行选择。

安装教程

首先克隆下载碎言静态博客, Gitee GitHub

终端运行:

pip install -r requirements.txt

安装相关依赖

安装完成。

创建文章

python z.py -n 此处写文章标题

这个时候就会在 articles 目录下创建一篇文章。 更多终端操作

创建索引

博客的文章排序及搜索以来此索引 blog_data.json ,每次创建文章的时候回自动更新索引,但是如果你修改了头部的一些索引信息,则需要运行命令来更新索引。

python z.py -i

修改博客及站长资料

config.json 里存放着一些站点的资料,上传前建议先修改成自己的资料。

config 配置详解点击查看

运行站点

推荐使用 Live Server 这个vscode得插件,非常方便。

修改站点样式

碎言博客内置了八套网站样式,四套light四套dark,修改四个html页面的外链CSS连接即可。

具体修改方法请点击查看: 细说修改碎言博客站点的样式

部署

git push origin master

提交所有文件到git仓库即可。

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

源码下载:

细说修改碎言博客站点的样式

J.sky 2019-12-30 20:15:29 碎言博客

碎言博客HTML结构

博客HTML只有4个:

  • index.html 博客首页
  • archives.html 归档
  • tags.html 标签页
  • p.html 博文详情页

CSS修改

碎言博客CSS前端采用的bootstrap4框架,CSS样式修改采用了less本地修改生成的.css文件。这里推荐一个vscode插件: Easy LESS

这个插件的特点就是在相同目录下可以生成一个同名的.CSS文件,配合 less 的引用命令 @import "theme-dark-1.less"; 使用起来很方便的。

博客的样式修改

碎言博客的样式主要集中在 <link id="blogcss"> 标签连接的CSS,通过修改对应的LESS文件中对应的颜色变量,可以快速的修改博客的颜色及相关样式,变量我都有注释。

Markdown代码样式

Markdown代码样式通过修改 <link id="highlight"> 标签连接的highlightCSS来修改,在 assets/plugins/highlight/styles 下可以选择自己喜欢的样式。

进阶修改

觉得手动修改站点样式太麻烦?可以利用 jQuery 在站点上添加在线改变站点样式的浮动按钮,近期会考录添加的碎言博客的。