vue初学：基础概念
一、vue使用步骤：
1.引包vue.js
2.html中写要操作的DOM节点
3.创建vue对象：new Vue({options});
4.配置options:el:(要操作的对象，用选择器，同jquery),
emplate:(模板，指定要插入的内容:{{插值表达式}},注：必须只有一个根节点),
data(function(){return key:emplate中要操作的数据}),
methods:{函数名:function(){函数体，（this.xxx调用data中定义的数据）(this.xxxMethods调用methods中的方法)}}
components:{'在emplate中要使用的标签名':要声明的子组件名}
二、vue基础概念：
1.插值表达式可以是：data中定义的数据；{{ '字符串' }}；三元表达式；布尔值；对象{{ {key:value} }}
2.指令：形如"v-xxx"，用于更简便的操作页面和数据。
三、 常用vue指令：
1.v-text
2.v-html
3.v-if
4.v-else-if
5.v-else
6.v-show
7.v-bind 给属性绑定值，语法：v-bind:属性名="常量||变量名"(常量要写引号),简写 :属性名="常量||变量名"
8.v-on 绑定事件 语法：v-on:事件名="函数名||表达式"，简写 @事件名="函数名||表达式"
9.v-if和v-show的区别：
v-if和v-show都是用来控制元素的渲染。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
10.v-bind和v-model区别：
v-bind可设置所有属性的属性值，但只能单向读取vue中的数据；
v-model只可设置value属性值，属于双向数据流
11.v-for 遍历数组或对象，语法：v-for="item in arr/obj"
扩展知识点：
数组：v-for="(item,index) in arr"
对象：v-for="(value,key,index) in obj"
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue第一个页面</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.a{
background-color: #ccc;
}
.b{
background-color: pink;
}
</style>
</head>
<body>
<div id="zl"></div> <script type="text/javascript">
new Vue({
el : "#zl",
template : `<div>
<div v-text="myText"></div>
<hr/>
<div v-html="myHtml"></div>
<h4 v-if="isExit">v-if控制是否存在</h4>
<h4 v-show="isShow">v-show控制是否显示</h4>
<!-- 以下三个指令，需结合使用 -->
<button v-if="num == 1" >测试v-if</button>
<button v-else-if="num == 2" >测试v-else-if</button>
<button v-else >测试v-else</button> <input type="text" v-bind:value="myBind" :file=" 'XXX' "></input>
<button v-on:click="myBind='aaa'">用v-on修改vue中数据</button>
<button @click="myBind='bbb'">用v-on简写修改vue中数据</button>
<!-- 双向绑定 -->
<hr/>
<i>当用户输入“同意”时显示按钮：</i>
<input type="text" v-model="myModel"/>
<button type="submit" v-show="myModel=='同意' ">提交</button>
<!-- v-for -->
<hr/>
<ul>
<li v-for="item in stud" :class="item.class">{{item.name}}</li>
</ul>
<!-- methods -->
<button v-on:click="toggleCont">{{name}}</button> <!-- 可缩写为@:click -->
</div>`,
data : function(){
return {
name : "点我！",
myText : "<h1>我是myText的内容</h1>",
myHtml : "<h1>我是myHtml的内容</h1>",
isExit : true,
isShow : true,
num : 4,
myBind : "v-bind测试",
myModel : "v-model测试",
stud : [{name:'张三',class:'a'},{name:'李四',class:'b'},{name:'王五',class:'a'}]
}
},
methods : {
toggleCont : function(){
this.name = "听话"
}
}
}); </script>
</body>
</html>
四、组件化：
1.局部组件使用步骤：1.创建子---2.声明子---3.使用子
创建子组件：var 子组件名称（首字母大写）={
template:'子模板'.....跟new Vue(){}中的内容一样
}
父组件components中声明子组件：components:{'在emplate中要使用的标签名':要声明的子组件名}
父组件template中使用子组件:template:'<标签名></标签名>'
2.注册全局组件步骤：Vue.component('组件名',{.....})
五、 父组件向子组件传递数据：
步骤：1.父传数据（属性）---2.声明数据---3.使用数据
父组件template中，用v-bind将要传递的数据绑定到子组件标签属性中；
子组件中props:['属性名']声明此数据；
子组件template中{{属性名}}使用此数据
附demo:（用的Hbuild对es6的支持不是特别好，字符串拼接，忍。。。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue组件练习</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-btn',{
template : '<button style="background-color:red;color:#fff;">红色的按钮</button>'
})
//局部子组件
var Mytop = {
data : function(){
return {
myText : '<i>测试v-text</i>',
myHtml : '<i>测试v-html</i>',
myValue : '单/双向数据流...',
stud : {
name : 'jack',
sex : '女',
age : '26'
},
studs : ['张三','李四','王五']
}
},
props : ['myTest'],
template : '<div><h5>我是头部</h5>'+'<p v-text="myText"></p>'+
'<p v-html="myHtml"></p>'+'<p v-if=""></p><hr/>'+
'单向v-bind：<input type="text" :value="myValue"/>'+
'双向v-model:<input type="text" v-model="myValue">'+
'<p>这里输出v-model中双向绑定的数据：{{myValue}}</p><hr/>'+
'v-for循环对象：<ul><li v-for="(val,key,i) in stud">{{key}}:{{val}}:{{i}}</li></ul>'+
'v-for循环数组：<ul><li v-for="item in studs">{{item}}</li></ul><hr/>'+
'<b>接收到父组件的数据为：{{myTest}}</b><hr/>'+
'<my-btn/></div>' }
var Mybody = {
data : function(){
return {
isShow : true,
isExit : true
}
},
template : '<div><p v-show="isShow">我是中部v-show测试</p>'+
'<p v-if="isExit">v-if测试</p>'+
'<button @click="myToggle">点我显示或隐藏</button>'+
'<my-btn/></div>',
methods : {
myToggle : function(){
this.isShow = !this.isShow;
this.isExit = !this.isExit;
}
}
}
//入口组件
var App = {
components : {
'mytop' : Mytop,
'mybody' : Mybody, },
data : function(){
return {
'myTest' : '我是父向子传递的数据'
}
},
template : '<div><h3>我是入口</h3>'+'<mytop :myTest="myTest"></mytop>'+'<mybody/>'+
'<my-btn/></div>',
}
new Vue({
el : "#app",
components : {
'app' : App
},
template : '<app/>'
})
</script>
</body>
</html>
六、 过滤器filter||filters：
作用：用于A数据到B数据的产出
局部过滤器filters：
1.在局部组件中定义filters:{'过滤器名',function(原数据形参,参数1){....return...}}
2.使用：template中数据输出：{{原数据实参(指明针对谁进行操作) | 过滤器名(实参1)}}
全局过滤器filter：
1.Vue.filter('过滤器名',function(参数){...})
2.使用与局部过滤器相同
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>过滤器filter || filters</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript">
Vue.filter('myTest',function(data){
return '我是全局过滤器的内容,'+data;
})
var App = {
template :'<div><h5>请输入内容，查看内容是否被反转：</h5>'+
'<input type="text" v-model="myText"/><p>{{myText | reverse("英文版")}}</p><hr/>'+
'<h5>全局过滤器：</h5><p>{{mydata | myTest}}</p></div>',
data : function(){
return {
myText : '',
mydata : '123'
}
},
filters : {
reverse : function(str,lang){
return lang + ":" + str.split('').reverse().join('');
}
}
}
new Vue({
el : "#app",
components : {
'app' : App
},
template : '<app/>'
})
</script>
</body>
</html>
七、watch监视器：
基本数据类型简单监视，复杂数据类型（obj/arr)深度监视
用法：watch : {
要监视的data数据 : function(newV,oldV){...},
要监视的obj/arr数据 : {
deep : true,
handler : function(newV,oldV){...}
}
}
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>监视watch</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript">
var App = {
data : function(){
return {
myText : '111',
stus : [{name : 'jack'}]
}
},
template : '<div><input type="text" v-model="myText" />'+
'<button @click="stus[0].name= \'rose\' ">深度监视stus[0].name</button></div>',
watch : {
myText : function(newV,oldV){
if(newV == 'I love you'){
alert(oldV + ' too');
}
},
stus : {
deep : true,//深度监视
handler : function(newV,oldV){
console.log('监控成功');
}
}
}
}
new Vue({
el : '#app',
components : {
'app' : App
},
template : '<app/>'
})
</script>
</body>
</html>
八、computed群体监视器：
用法：computed : {
监视器名称 : function(){//(监视器名称接收此函数return出去的数据)
return this.xxx;//(this.xxx为本组件中data定义的数据)
}
}
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>computed群体监视</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript">
var App = {
data : function(){
return {
value01 : 0,
value02 : 0,
rate : 0
}
},
template : '<div><p>计算(a+b)*c的值：</p>a:<input type="text" v-model="value01"/>'+
'b:<input type="text" v-model="value02"/><br/>c:<input type="text" v-model="rate"/>'+
'<p>{{result}}</p></div>',
computed : {
result : function(){
return (parseFloat(this.value01)+parseFloat(this.value02))*parseFloat(this.rate);
}
}
}
new Vue({
el : '#app',
components : {
'app' : App
},
template : '<app/>' })
</script>
</body>
</html>
九、 watch和v-model的区别
v-model : 只用于对数据的双向绑定及展示。是对单个数据的监视
watch : 可用于对数据的双向绑定、展示，以及一些复杂的行为。也是对单个数据的监视
computed : 用于群体监视
十、内置组件slot：
父组件传递的DOM结构
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slot内置组件</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
li {
list-style: none;
float: left;
width: 33%;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
Vue.component('myLi',{
template : '<li><slot></slot></li>'
})
var App = {
template : '<div><ul><myLi><h4>111</h4></myLi>'+
'<myLi><button>222</button><b>222</b></myLi>'+
'<myLi><input type="text" value="333"/></myLi>'+
'<myLi>444</myLi><myLi>555</myLi><myLi>666</myLi>'+
'<myLi>777</myLi><myLi>888</myLi><myLi>999</myLi></ul></div>'
}
new Vue({
el : '#app',
components : {
'app' : App
},
template : '<app/>'
})
</script>
</body>
</html>
十一、组件生命周期：
beforeCreate : 组件创建之前(不可获取到组件中的数据)
created : 组件创建之后
beforeMount : vue启动前的DOM
mounted : vue启动后的DOM
//beforeUpdate/updated在DOM发生更新时才会被触发
beforeUpdate : 更新前DOM
updated : 更新后DOM
beforeDestory : 本组件销毁之前
destroyed : 本组件销毁之后
//对于组件的频繁创建和销毁是不对的，内置组件<keep-alive></keep-alive>包裹后的v-if表示激活或停用该组件
alivated : 组件被激活
dealivated : 组件被停用
附demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件生命周期</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/组件生命周期.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"> </div>
</body>
</html>
window.onload = function(){
var MyTest = {
data : function(){
return {
myText : '111'
}
},
template : '<h3>{{myText}}</h3>'
}
var App = {
data : function(){
return {
myText : 'aaa',
isExit : true
}
},
components : {
'myTest' : MyTest
},
template : '<div><h5>{{myText}}</h5><button @click="myText+=1 ">更改DOM数据</button>'+
'<hr/><myTest v-if="isExit"></myTest><button @click="isExit = !isExit">创建及销毁MyTest子组件</button></div>',
beforeCreate : function(){
//组件创建之前
console.log(this.myText);
},
created : function(){
//组件创建之后
console.log(this.myText);
},
beforeMount : function(){
//vue启动前的DOM
console.log(document.body.innerHTML);
},
mounted : function(){
//vue启动后的DOM
console.log(document.body.innerHTML);
},
//beforeUpdate/updated在DOM发生更新时才会被触发
beforeUpdate : function(){
//更新前DOM
console.log(document.body.innerHTML);
},
updated : function(){
//更新后DOM
console.log(document.body.innerHTML);
}
}
new Vue({
el : '#app',
components : {
'app' : App
},
template : '<app/>'
})
}
vue初学：基础概念的更多相关文章
- vue的基础概念和语法01
vue的特点和web开发中的常见高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 数据响应式 不是所有元素操作都Vue都会监听并实现数据响应式 //push方法:追加 thi ...
- 关于vue的基础概念
vue-cli相当于脚手架 给你自动生成模板工程vue-router是 vue路由插件 支持你单页应用的vue-loader是webpack下loader插件 可以把.vue文件 输出成组件
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用（下）
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- TCP/IP基础概念及通信过程举例
TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...
- Jmeter基础之---jmeter基础概念
Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...
随机推荐
- GridEh 当前行
DataSet当前行,不是当前选中的行 int arow = 0; arow = cds1->RecNo; arow = cds1->RecordCount; arow ...
- IUSER 匿名帐户密码获取
如何获取IUSR帐号和密码呢?有两种方法 1.安装IIS Resources,打开IIS Resources中的Metabase Explorer->机器名->LM->W3SVC-& ...
- SpringBoot读取application.properties文件内容
application.properties存储数据的方式是key-value. application.properties内容 userManager.userFile=data/user.pro ...
- 链表有环判断，快慢指针两种方法/合并链表/删除重复元素/二分递归和while
public static boolean hasCycle(ListNode head) { if (head == null || head.next == null) { return fals ...
- html 基础之canvas 和 localStorage
1,建立一个canvas 画布: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 尚硅谷redis学习5-初识redis.conf
redis.conf是redis的配置文件,在解压后的redis安装文件夹下 单位 1 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 2 对大小写不敏感 包含 ...
- cxgrid合并值相同的某列
设置 cxGrid 的某列的 CellMerging 属性可使这一列相同值的单元格合并. 1)cxGridDBTableViewColumn1.Options.CellMerging:=true 2 ...
- php压力测试工具简单实用方法
命令 ab -h 指令帮助 ab -n100 -c10 http://www.baidu.com 发起100个请求 并发数为10 设置测试地址是百度,注意测试测试时候请求数和并发数尽量设置低一点 Re ...
- linux文件和目录的删除、新建、移动等操作
在Linux下进行切换目录 cd 在Linux下查看当前目录下的内容 ls. ll. ls -al 如何显示当前命令所在的目录路径 pwd 在Linux下创建目录 mkdir 在L ...
- Struct2.0学习笔记1
为了更好的配合队友写项目 现在学习如下 1.目录 2. 3. Struct2-Action 配置环境 4. 改action 名字 不用重启服务器(从上面粘贴) 改成true 即开发模式 5.想看源码 ...