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 下升级安装mysql8,与旧版本5.6共存
应开发需求,自mysql5.7开始引入json列类型和相关函数.为了提高数据读写的访问效率因此把数据库从mysql 5.6版升级到最新发行版 mysql 8.0.11 . 特此记录下多版本升级共存的过 ...
- JAVA 时间"dd/MMM/yyyy:HH:mm:ss Z", Locale.US
工作遇到时间格式转换问题, 就是在日志分析时, 需要将格式“15/Oct/2009:14:00:00 +0800”转为格式“2009-10-15 14:00:00”, 找了好久没有找到合适的,终于在友 ...
- 解决还原数据库是出现system.data.sqlclient.sqlerror filestream功能被禁用的问题
在master数据库下新建查询 输入如下语句: USE master GO RECONFIGURE 执行 成功还原数据库
- vue element 新增、编辑类Dialog公用函数
调用 <el-button type="primary" class="my-button" size="small" :loadin ...
- C++ 数据结构概念
C++ 数据结构概念 数据结构起源 计算机从解决数值计算问题到解决生活中的问题 现实生活中的问题涉及不同个体间的复杂联系 需要在计算机程序中描述生活中个体间的联系 数据结构主要研究非数值计算程序问题中 ...
- 初次使用http打不开页面，使用https打开过后使用http协议又能正常访问
http协议为什么打不开https站点 在访问一个https的站点,比如 https://www.aaa.com,首次访问时,访问的地址是 http://www.aaa.com,(不加S),出现的是网 ...
- SHA1WithRSA签名 规范化标准签名
#region CerRsaSignature 根据私钥签名 /// <summary> /// 根据私钥串签名 /// </summary> /// <param na ...
- android上的默认Intent
android上的默认Intenthttp://www.verydemo.com/demo_c189_i276.html
- codeforces contest 1111
A. Superhero Transformation 题意: 元音和元音,辅音和辅音字母之间可以互相转换,问两个字符串是否想同: 题解:直接判断即可: #include<bits/stdc++ ...
- 团体程序设计天梯赛 L1-011. A-B
读入的是字符串,数组大小至少为字符串长度+1 #include <stdio.h> #include <stdlib.h> #include <string.h> ...