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 学习内容: ...
随机推荐
- requests爬取知乎话题和子话题
zhihu.py # *_*coding:utf-8 *_* import pymysql import requests from lxml import etree from requests_t ...
- Java 反射 调用 demo
基础类.供demo反射练习 package fanshe; public class Person { public String name; private String age; private ...
- DataTable List 相互转换
This uses the FastMember's meta-programming API for maximum performance. If you want to restrict it ...
- 关于 WinScp 的一点使用经验
在嵌入式平台下 是,使用SSH登陆,可以使用WinScp提供的图形界面,支持拖拽,鼠标直接打开,甚是好用. 使用WinScp 登陆的方式有,Scp和sftp两种,之前一只用scp,但后来出现了如下错误 ...
- git工具的使用总结
Git的使用 进入一个新的公司或者参入一个新的项目后,可能的第一步就是获取代码仓库的代码.公司内部一般放到代码仓库(下面主要以gitHub.Windows平台为例)的代码都经过加密认证的. 如何将Gi ...
- MachineLearning Exercise 7 ： K-means Clustering and Principle Component Analysis
findClosestCentroids.m m = size(X,); :m [value index] = min(sum((repmat(X(i,:),K,)-centroids).^,)); ...
- python读取写入内存方法SringIO,BytesIO
python中不仅仅可以在磁盘中写入文件,还允许直接在内存中直接写入数据:需要借助StringIO和BytesIO来实现: 1.直接操作StringIO from io import StringIO ...
- BZOJ 1283: 序列
1283: 序列 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 272 Solved: 151[Submit][Status][Discuss] D ...
- Java EE之JSP
1.使用JSP的原因 编写Servlet代码的时候,向响应中输出HTML文档是非常不方便的. PrintWriter writer = response.getWriter(); writer.app ...
- More than one file was found with OS independent path 'META-INF/LICENSE' | Error:Could not read \build\intermediates\typedefs.txt (系统找不到指定的文件。)
FAQ1: Error:Could not read E:\new\PlatformLibrary\CommonLibrary\build\intermediates\typedefs.txt: E: ...