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 学习内容: ...
随机推荐
- windows多线程（一） 创建线程 CreateThread
一 线程创建函数 CreateThread 修改说明: 这里 说了另一种创建线程方法,使用_beginthreadex()更安全的创建线程,在实际使用中尽量使用_beginthreadex()来创建线 ...
- autoboxing and unboxing
Why does 128==128 return false but 127==127 return true public static void autoboxingUnboxing(){ Int ...
- 使用Fiddler后谷歌浏览器访问https不安全
今天初次接触java爬虫,师兄给了一个软件加一个demo,软件是Fiddler,在网上找资料稍微学习了一下,自己一顿乱配...然后gg,谷歌浏览器访问https协议时都提示不安全,“您的链接不是一个私 ...
- 图片上传预览，兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Windows平台下在服务中添加MySQL
widows下查看服务 1.桌面计算机-->右键-->管理-->计算机管理(本地)--->服务和应用程序-->服务 2.运行 中输入 services.msc 在服务中添 ...
- c++11 模板的别名
c++11 模板的别名 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #inclu ...
- 【刷题】HDU 1853 Cyclic Tour
Problem Description There are N cities in our country, and M one-way roads connecting them. Now Litt ...
- Mininet 系列实验（二）
实验内容 分别通过命令行创建.Python脚本编写以及交互式界面创建来熟悉Mininet的基本功能. 参考 Mininet命令延伸实验扩展 实验环境 虚拟机:Oracle VM VirtualBox ...
- 【BZOJ 1098】办公楼（补图连通块个数，Bfs）
补图连通块个数这大概是一个套路吧,我之前没有见到过,想了好久都没有想出来QaQ 事实上这个做法本身就是一个朴素算法,但进行巧妙的实现,就可以分析出它的上界不会超过 $O(n + m)$. 接下来介绍一 ...
- 【bzoj2301】 HAOI2011—Problem b
http://www.lydsy.com/JudgeOnline/problem.php?id=2301 (题目链接) 题意 给出${a,b,c,d,k}$,${n}$组询问,求$${\sum_{i= ...