Vue.js的第一天学习_vue 生命周期 mother-程序员宅基地
1、Vue.js
1.1 概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.2 起步
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。
2、Node (后端)中的MVC与前端中的MVVM之间的区别
●MVC是后端的分层开发概念;
●MVVM是前端视图层的概念,主要关注于视图层分离,也就是说: MVVM把前端的视图层,分为了三部分Model，View，VM ViewModel
●为什么有了MVC还要有MVVM
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
下面可以以一个小页面带大家感受一下(我也是通过这样一个页面来感受了一下Vue.js跟以前用的jquery的不同之处，从jquery到vue或者说是到mvvm的转变则是一个思想的转变，是将原有的直接操作dom的思想转变到操作数据上去。
1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低
2.vue：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvvm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。 然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起 )
3、第一个Vue.js页面：
描述：导入Vue的包(“vue.js”)
放进js包内，
在script标签内，引入vue.js的路径，
<!-- 描述：1、导入Vue的包 -->
<body>
<!-- 描述：用来new的Vue实例，会控制这个元素的所以内容 -->
<!-- Vue实例控制的这个元素区域，就是我们的v -->
<div id="app">
<p>{
{msg}}</p>
<!--<p id="content"></p>-->
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>//2.创建一个Vue的实例
//当我们导入包之后，在浏览器的内存中，就多了一个Vue的构造函数
var vm = new Vue({
el: '#app',//表示我们当前new的这个Vue实例，要控制页面
//这里的data就是MVVM中的M，专门用来保存每个数据的
data:{ //data属性中，存放的是el中用到的数据
msg:'Hello!欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，我们程序员不需要手动去操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
4、v-cloak、v-html、v-text、v-bind的使用:
v-cloak：能够解决 插值表达式闪烁的问题
v-text：默认v-text是没有闪烁问题的 ，v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符，v-text和{
{}}表达式渲染数据，不解析标签。
v-html：v-html不仅可以渲染数据，而且可以解析标签。
v-bind：绑定元素特性
<style>
[v-cloak]{
display:none;
}
</style>
<body>
<div id="app">
<!-- 使用v-cloak 能够解决 插值表达式闪烁的问题-->
<p v-cloak>{
{msg}}</p>
<h4 v-text="msg">========</h4>
<!--默认v-text是没有闪烁问题的 ，v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符-->
<div >{
{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- v-bind: 是Vue中，提供的用于绑定属性的指令-->
<!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" />-->
<!-- 注意：v-bind:指令可以被简写: 为要绑定的属性-->
<!-- v-bind中，可以写合法的JS表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle " />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>哈哈，我是大大的h1<h1>',
mytitle:'一个自己定义的title'
}
})
</script>
</body>
注意：v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你也已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 mytitle属性保持一致”。
智能推荐
JavaScript语法高亮库highlight.js使用_语法高亮js css文件-程序员宅基地
文章浏览阅读9.9k次。highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，可以混合使用。这款高亮库可以用在博客系统中，其使用方法及其简单，几乎不需要任何学习成本，下面介绍highlight.js的使用。1.获取highlight.js库，用户可以从官网获取：地址：https://highlightjs_语法高亮js css文件
【笔记】strftime的使用方法-程序员宅基地
文章浏览阅读5.1k次。strftimestrftime是C语言标准库中用来格式化输出时间的的函数。下面是strftime的用法各参数意义代码使用示例#include<stdio.h>#include<time.h>#define print(s1, s2,s3) \ printf("%-20s%-30s%s\n",s1, s2,s3);int main(){ time_t rawtime; struct tm* timeinfo; char timE[80]; /
2018.09.12 poj3621Sightseeing Cows（01分数规划+spfa判环）-程序员宅基地
文章浏览阅读147次。传送门 01分数规划板题啊。 发现就是一个最优比率环。 这个直接二分+spfa判负环就行了。 代码：#include<iostream>#include<cstdio>#include<cstring>#include<algorithm>#include<cmath>#define N 1005#define...
hive sql的常用日期处理函数总结_hive sql 日期函数-程序员宅基地
文章浏览阅读3.1k次，点赞2次，收藏14次。1）date_format函数（根据格式整理日期） 作用：把一个字符串日期格式化为指定的格式。select date_format('2017-01-01','yyyy-MM-dd HH:mm:ss'); --日期字符串必须满足yyyy-MM-dd格式 结果：2017-01-01 00:00:002）date_add、date_sub函数（加减日期） 作用：把一个字符串日期格式加一天、减一天。select date_add('2019-01-01',1); ..._hive sql 日期函数
Android Studio使用百度语音合成是TTS时报错： ****.so文件找不到的有关问题_旧版的百度语言合成报错-程序员宅基地
文章浏览阅读2.1k次。使用百度语音合成过程时，一直error : notfint libgnustl_shared.so在项目工程gradle文件中添加如下代码段：sourceSets { main { jniLibs.srcDirs = ['libs'] } }..._旧版的百度语言合成报错
BZOJ1202: [HNOI2005]狡猾的商人_狡猾的商人[hnoi2005]-程序员宅基地
文章浏览阅读425次。Description 刁姹接到一个任务，为税务部门调查一位商人的账本，看看账本是不是伪造的。账本上记录了n个月以来的收入情况，其中第i个月的收入额为Ai(i=1,2,3…n-1,n)， 。当 Ai大于0时表示这个月盈利Ai 元，当 Ai小于0时表示这个月亏损Ai元。所谓一段时间内的总收入，就是这段时间内每个月的收入额的总和。 刁姹的任务是秘密进行的，为了调查商人的账本，她只好跑到商人那_狡猾的商人[hnoi2005]
随便推点
kali 安装取证工具volatility_kali安装volatility-程序员宅基地
文章浏览阅读3.1k次，点赞2次，收藏12次。计算机取证 volatility_kali安装volatility
html禁止图片缓存(刷新网站)_html禁止浏览器缓存图片-程序员宅基地
文章浏览阅读2.1k次。地址：https://blog.csdn.net/fareast_mzh/article/details/81464031_html禁止浏览器缓存图片
如何设置一个计算机用户访问磁盘,登录后限制用户访问硬盘分区-程序员宅基地
文章浏览阅读1.3k次。限制用户登录后访问硬盘分区。我们的部门有一台公用计算机，该计算机由我维护。其他同事也可以偶尔使用它。我在操作系统中为自己创建了一个超级管理员用户，还创建了一个受限用户。登录到计算机后，如何允许受限用户查看但不能访问用于存储重要文件的D分区？您可以通过以下操作实现该目标：在系统桌面上使用鼠标依次选择“开始”。在弹出窗口的“打开”(Open)字段中键入gpedit.msc，然后单击“确定”(OK)按钮..._win7 分区只能某个用户打开
更改vscode Java项目的.class文件输出路径_vscode怎么class文件-程序员宅基地
文章浏览阅读6.7k次，点赞17次，收藏21次。1.在vscode里面按下快捷键ctrl+shift+p2.输入Classpath3.点击Output下的Browse选择.class文件的输出路径4.如图，选择完以后，.class文件的输出层级目录会自动建立_vscode怎么class文件
Python缩进规则-程序员宅基地
文章浏览阅读1.2w次，点赞4次，收藏24次。python的缩进规则：对于类定义、函数定义、流程控制语句、异常处理语句等，行尾的冒号和下一行的缩进，表示下一个代码块的开始，而缩进的结束则表示此代码块的结束。通常情况下都是采用4个空格长度作为一个缩进量（一个Tab键就表示4个空格）。一，Python缩进长度及缩进字符。 看到网上一些Python缩进的错误示范，“tab符和空格不能混用”，“缩进一定是4个空格”下列演示。def change(a): print(id(a)) # 指向的是同一个对象(tab缩进) a=10_python缩进规则
微信小程序api视频课程-定时器-setTimeout的使用_微信小程序 settimeout 向上层传值-程序员宅基地
文章浏览阅读1.1k次。JS代码 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { setTimeout( function(){ wx.showToast({ title: '黄菊华老师', }) },2000 ) },说明该代码只执行一次..._微信小程序 settimeout 向上层传值