vue、入门
入门vue
v-on:click:chang 绑定事件点击
生面周期，整个vue的执行过程，他的应用执行了生面周期，也就是执行过程，这个执行过程如下图表，我们可以参考下图，也可以访问官方网址：https://vuejs.org/v2/guide/instance.html。
当变量进来的时候我们就要调用模板进行渲染等等。
初始化--->boeforecreate--->created--->beforeMout（渲染之前、挂载之前）--->mounted---->beforeupdate -----> updated --这就是一个生命周期的流程。
实际上中间的很多东西我们是操作不了的，因为别人已经写好了固定的模型，所以我们只要懂得业务逻辑就可以很好的做开发了。总体还有没有了解透的可以点击进去官方网址看看，我这里只是统计一个大概内容而已，并没有完善整个资料。我们可以在它的整个生命周期来调用不同的函数和方法来执行我们所需求的业务逻辑等，比如在挂载之前我们发起ajax去请求，等等度可以，这些代码库都是相互并用的，并不是一山不容二虎，恰好在他们并用的时候才能发挥更大的作用。
比如我们在某个过程中我们可以使用ajax发起http请求json文件，调用网址等等。生命周期的一点小理解：就是在他的某个阶段前，操作某个事件，
条件渲染：
（1）、视图的变化就是由数据来决定的。
v-if:渲染一个
v-show:渲染多个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
1、仅仅只需要关注数据、业务逻辑和事件，dom直接的操作隐藏起来，不用再重复去做这个事情。
2、大大增加团队效率，团队协作能力
3、模块化，降低耦合度
4、数据的双向绑定,视图和模型的数据是绑定在一起的，变更1个，那么所有都变更
--> <!--视图-->
<div id="app">
<h1>{{jsonMsg}}</h1>
<p>{{jsonContent}}</p>
<h1> 这是H1内容： {{ isA ? a : b}}</h1> <!--将变量绑定到属性上-->
<a v-bind:href="httpUrl">链接地址</a>
<a :href="httpUrl">链接地址</a> <div>
{{htmlElement}}
</div> <div v-html='htmlElement'></div> <h1>{{msg}}</h1>
<h1 v-once>{{msg}}</h1>
<input type="text" v-model='msg' name="" id="" value="" /> <button v-on:click='changeUrl'>更改为淘宝地址</button>
<!--
v-on:可以缩写成@
-->
<button @click='changeMsg'>更改msg</button>
</div>
<!--
vue模板：
1、变量放在{{}}里面，里面可以正常运行JS表达式
2、变量如果要放在HTML的属性里面，那么就需要使用v-bind,缩写即前面加冒号
3、默认是将HTML以字符串的形式输出到视图，如果想要以HTML的形式输出到视图，那么需要使用v-html这个指令
4、v-once只渲染1次
5、绑定事件的书写方式：v-on, vue应用生命周期（即执行过程）
new Vue(配置变量)
---》初始化
---》beforecreate
---》created
--》beforeMount(渲染之前、挂载之前)
---》mounted
--》beforeupdate
---》updated
---》beforeDestory
---》destoryed 条件渲染： -->
<script type="text/javascript">
var obj = {
el:'#app',
data:{
msg:'helloworld',
num:'123456778',
isA:false,
a:8,
b:4,
httpUrl:'http://www.baidu.com',
htmlElement:'<button>这是一个按钮</button>',
jsonMsg:'',
jsonContent:''
},
methods:{
changeMsg:function(){
this.msg = '今天天气不错'
},
changeUrl:function(){
this.httpUrl = 'http://www.taobao.com'
}
},
beforeCreate:function(){
console.log('创造之前执行的函数')
},
created:function(){
console.log('创造之后')
},
beforeMount:function(){
console.log('挂载之前')
var that = this
$.ajax({
url:'abc.json',
success:function(res){
console.log(res)
that.jsonMsg = res.msg
that.jsonContent = res.content
}
})
},
mounted:function(){
console.log('挂载之后')
},
beforeUpdate:function(){
console.log('更新之前')
},
updated:function(){
console.log('更新之后')
}
}
var app = new Vue(obj)
console.log(app) </script>
</body>
</html>
vue的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{ isLogin ? '登录' : '注册' }}</h1> <form action="" v-if='isLogin' >
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="submit" name="" id="" value="登录" />
</form> <form action="" v-if='!isLogin'>
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="password" placeholder="请再次输入密码" />
<input type="submit" name="" id="" value="注册" />
</form> <hr />
<hr /> <form action="" v-show='isLogin' >
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="submit" name="" id="" value="登录" />
</form> <form action="" v-show='!isLogin'>
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="password" placeholder="请再次输入密码" />
<input type="submit" name="" id="" value="注册" />
</form>
<!--
条件渲染：
v-if:在只渲染一次的情况下，那么性能最佳
v-show:在频繁切换的情况下，那么性能最佳，因为v-show，所有都生成出来，通过display来决定是否显示 -->
<button @click='login'>登录</button>
<button @click='register'>注册</button>
</div> <script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
isLogin:true
},
methods:{
register:function(){
this.isLogin = false
},
login:function(){
this.isLogin = true
}
}
})
</script>
</body>
</html>
条件渲染
vue、入门的更多相关文章
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- PHP 常用函数总结（三）
7.PHP JSON 格式 json_encode ( mixed $value [, int $options = 0 [, int $depth = 512 ]] ) 返回字符串,包含了 valu ...
- [转帖学习] 使用阿里云证书 升级https
nodejs从http升级到https(阿里云证书的使用) https://home.cnblogs.com/u/lhyxq/ 改天买一个域名自己试试. 升级原因 1.各大搜索引擎中,https ...
- 浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase
Cookie 它是标准的客户端浏览器状态保存方式,可能在浏览器诞生不久就有Cookie了,为什么需要Cookie 这个东东?由于HTTP协议没有状态,所以需要一个标志/存储来记录客户浏览器当前的状态, ...
- LINQ to SQL和Entity Framework
LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术. 那么为什么会有LINQ这个东西的出现呢. 简单来说LINQ是为了满足不知道怎么操作数据库的程序员开 ...
- UVALive6442_Coins on a Ring
真正的水题,可惜无法当场机智一下. 这样的,在一个圈圈上给你n个黑点,现在要你移动每一个黑点使得所有的点都是等间距的,每个点中最远需要一定的那个点最小可以是多少? 其实是这样来考虑的,我们可以随便设置 ...
- 学习Spring Boot：（三）配置文件
前言 Spring Boot使用习惯优于配置(项目中存在大量的配置,此外还内置了一个习惯性的配置,让你无需手动进行配置)的理念让你的项目快速运行起来. 正文 使用配置文件注入属性 Spring Boo ...
- 【BZOJ2423】最长公共子序列（动态规划）
[BZOJ2423]最长公共子序列(动态规划) 题面 BZOJ 洛谷 题解 今天考试的时候,神仙出题人\(fdf\)把这道题目作为一个二合一出了出来,我除了orz还是只会orz. 对于如何\(O(n^ ...
- 【51Nod1847】奇怪的数学题
记\(f(x)=\)\(x\)的次大因数,那么\(sgcd(i,j)=f(gcd(i,j))\). 下面来推式子: \[ \begin{aligned} \sum_{i=1}^n\sum_{j=1 ...
- FourAndSix: 2.01靶机入侵
0x01 前言 FourAndSix2是易受攻击的一个靶机,主要任务是通过入侵进入到目标靶机系统然后提权,并在root目录中并读取flag.tx信息 FourAndSix2.镜像下载地址: htt ...
- VIM 模板
Vim实现自动加载模版功能可以有很多的方法,比如利用插件和AutoCmd等.根据文件名自动加载模板的功能利用网上某大牛自己写的插件实现,我针对Java代码进行简单地修改,以实现模板中的Java主类类名 ...