1 Vue框架

1. vue 与 jQuery 区别

  • jQuery 仍然是操作DOM的思想, 主要jQuery 用来写页面特效

  • Vue是前端框架(MVVM) ,对项目进行分层。 处理数据

2 前端框架

  • angular google

  • react facebook

  • vue 全世界

3 单页面应用

4 MVVM

  • M 模型层 Model

  • V 视图层 View

  • VM (控制层) VIEW-MODEL

2 VUE实例

2.1 挂载元素

2.2 数据 data

Vue({
   
  data: {
       
  }
})

2.3 方法 methods

Vue({
  methods: {
       
  }
})
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 500px;
border: 1px solid #ccc;
padding: 20px;
}
p.current {
border-color: red;
}
</style>
</head>
<body>
<!-- div 视图层 -->
<div id = "app">
<h1>{{ title }}</h1>
<hr>
<p>
{{ message }}
</p>
<input type="text" v-model = "username">
<p>
{{username}}
</p>
<!-- {current:isActive}是一个对象 -->
<p v-on:click="activeColor()" v-bind:class="
{current:isActive}">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam perspiciatis fugiat est, temporibus vero expedita, aliquid libero hic iusto tempora deleniti nostrum quaerat dicta sit quisquam praesentium repudiandae consequatur dolores!
</p> </div>
<script src = "vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el:'#app',
data:{
title:'so many remembered',
message:'so tired too boring',
username:'sb front haha'
},
methods:{
changeMessage:function(){
this.message = this.message.split('').reverse().join('')
},
activeColor: function(){
this.isActive = !this.isActive;
this.alertHello();
},
alertHello: function(){
alert('HEELO');
} } })
</script>
</body>
</html>

vue入门

 

2.4 计算属性 computed

Vue({
  computed: {
      属性名: function(){
           
      }
  }
})
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
p {
border:1px solid #ccc;
padding: 20px;
width: 400px;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue计算属性</h1>
<hr>
firstName: <input type="text" v-model='firstName'> <br>
lastName: <input type="text" v-model='lastName'> <br>
<p>
{{ fullName }}
</p>
</div> <script src="../vue.js"></script>
<script>
//创建Vue实例
let vm = new Vue({
el:'#app',
data: {
firstName:'',
lastName:''
},
computed: {
fullName: function(){
return this.firstName + this.lastName
}
}
}); //console.log(vm.fullName)
//console.log(typeof vm.fullName)
</script>
</body>
</html>

计算属性

 

2.5 监听属性

Vue({
  watch: {
      属性: function(){
           
      }
  }
})
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
p {
border:1px solid #ccc;
padding: 20px;
width: 400px;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue监听属性</h1>
<hr>
请输入全名: <input type="text" v-model='fullName'>
<p>
lastName: {{ lastName }}
</p>
<p>
firstName: {{ firstName }}
</p>
</div> <script src="../vue.js"></script>
<script>
//创建Vue实例
let vm = new Vue({
el:'#app',
data: {
fullName:'',
firstName:'',
lastName:''
},
watch: {
fullName: function(){
this.firstName = this.fullName.split(' ')[0]
this.lastName = this.fullName.split(' ')[1]
}
} })
</script>
</body>
</html>

监听属性

 

监听属性和计算属性

计算属性(computed): 适合一个属性受到多个属性的影响
监听属性(watch): 多个属性依赖于一个属性
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
</head>
<body>
<!--挂载元素-->
<div id="myApp">
<h1>{{ title }}</h1>
<h2>{{ reverseTitle }}</h2> <input type="text" v-model='title'>
<hr>
<input type="text" v-model='message'>
<p>{{ message }}</p>
<p>{{ reverseMessage }}</p> <!--不建议这么干, 视图层不要有逻辑计算-->
<!-- <p>{{ message.split('').reverse().join('') }}</p> -->
</div> <script src="../vue.js"></script>
<script>
//创建Vue实例
let vm = new Vue({
el: '#myApp',
data: {
title:"HELLO 同志",
message:'同志你辛苦了',
reverseTitle:''
},
methods: { },
computed: {
reverseMessage: function(){
return this.message.split('').reverse().join('')
}
},
watch: {
message: function(){
console.log('改变');
},
title: function(){
this.reverseTitle = this.title.split('').reverse().join('');
}
}
}); /*
console.log(vm);
console.log(vm.title);
console.log(vm.$el);
console.log(vm.$data.title);
vm.$watch('title', function(){
console.log('变了');
})*/ console.log('')
</script>
</body>
</html>

常用属性

2.6 生命周期的钩子函数

beforeCreate
created     此时,Vue实例的方法、属性都都已经创建。 可以在这里获取后端数据
beforeMount
mounted     此时,Vue实例已经挂载到元素上。 操作DOM请在这里
beforeUpdate
updated
activated
deactivated
beforeDestory
destoryed
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明周期</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<hr>
<input type="text" v-model="message">
<p>
{{ message }}
</p>
</div> <script src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: '#app',
data: {
title:'Vue生命周期',
message:'HELLO'
},
methods: { },
computed: { },
watch: { }, //钩子函数
beforeCreate: function(){
//vue实例刚刚创建,什么都没干
console.log('beforeCreate');
//console.log(this);
//console.log(this.title);
console.log('')
},
created: function(){
//创建了数据、计算属性、方法、监听 统统创建
//可以在这里 获取服务端的数据
console.log(this.title)
console.log('created');
console.log('') },
mounted: function(){
//非要进行 dom操作,请在进行
console.log('挂载完成');
console.log(this.$el);
console.log('')
},
updated: function(){
console.log('属性更新完成', this.message); }
}) console.log('');
console.log('');
console.log('');
console.log('');
</script>
</body>
</html>

生命周期的钩子函数

详细说明一下钩子函数:

详解:

  1. beforeCreate
    官方说明:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    解释:这个时期,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;

     beforeCreate() {
    console.log(this.page); // undefined
    console.log{this.showPage); // undefined
    },
    data() {
    return {
    page: 123
    }
    },
    methods: {
    showPage() {
    console.log(this.page);
    }
    }
  2. created
    官方说明:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
    解释说明: 这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;

     created() {
    console.log(this.page); // 123
    console.log{this.showPage); // ...
    $('select').select2(); // jQuery插件需要操作相关dom,不会起作用
    },
    data() {
    return {
    page: 123
    }
    },
    methods: {
    showPage() {
    console.log(this.page);
    }
    }
  3. beforeMounte
    官方说明:在挂载开始之前被调用:相关的 render 函数首次被调用。

  4. mounted
    官方说明:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    解释说明:挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行

     mounted() {
    $('select').select2(); // jQuery插件可以正常使用
    },

3 Vue视图

3.1 基本模板语法

文本插值

{{ title }}

<p v-text="title">

<p v-once>{{ title }}</p> message变化,这里不会改

HTML

<div v-html="message">

绑定属性

<img v-bind:src="imgSrc" v-bind:title="title"  :alt="altContent">
<p v-bind:id="" :class="">

视图进行表达式运算

{{ 表达式运算 }}
不建议

防止闪烁

<style>
[v-cloak] {
      display:none !important
}
</style>

<div id="app" v-cloak>
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue视图</title>
<style>
p {
width:400px;
border:1px solid #ccc;
padding:20px;
}
img {
width:100px;
} [v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{ title }} 打扎好</p>
<p v-text="title"></p>
<p v-once> {{ title }}</p>
<input type="text" v-model="title"> <div v-html="content"> </div> <hr> <img v-bind:src="imgSrc" v-bind:title="title" v-bind:alt="message">
<img :src="imgSrc" :title="title">
<hr> <input type="text" :value="message">
<p>{{message}}</p> <hr> <p> {{ 1+1 }}</p>
<p> {{ message.toUpperCase() }}</p>
</div> <script src="../vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
message:'Hello World',
title:'同志交友',
content:'<h2>同志</h2>',
imgSrc:'../../dist/images_one/10.jpg'
}
})
</script>
</body>
</html>

vue视图层基本模板语法

3.3 条件渲染

v-if
v-else-if
v-else

v-show v-show控制隐藏和显示
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
<style>
.box {
border:1px solid #ccc;
padding: 10px;
width: 600px;
}
</style>
</head>
<body> <div id="app">
<h1>条件渲染</h1>
<hr>
<button @click="isShow = !isShow">改变</button>
<!-- <div class="box" v-if="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quo saepe, eum nisi. Atque, pariatur ad sapiente alias, dignissimos tempora iusto ullam veritatis, obcaecati ipsa dicta sunt dolorem ducimus eos!
</div> --> <template v-if="isShow">
<h2>锄禾</h2>
<p>锄禾日党务</p>
<p>锄禾日党务</p>
<p>锄禾日党务</p>
</template> <div class="box" v-else>
HELLO 同志
</div> <hr> <input type="number" v-model="tag" max="3" min="0" step="1"> <div class="box" v-if="tag == 0" key="1">
00000000000000000000000000
</div> <div class="box" v-else-if="tag == 1" key="2">
1111111111111111111111111111
</div> <div class="box" v-else-if="tag == 2" key="3">
222222222222222222222222222222
</div> <div class="box" v-else key="4">
else esle else else else else
</div> <hr> <p v-show="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam incidunt perspiciatis, soluta repellendus ipsa placeat hic? Aspernatur modi, corporis incidunt deserunt accusantium laudantium, voluptates maxime eveniet maiores a labore nam.</p>
</div> <script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
isShow: true,
tag:0
}
})
</script>
</body>
</html>

vue条件渲染

 

3.4 列表渲染

v-for
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="app">
<h1>列表渲染</h1>
<hr>
<button @click="updateItemList()">更新数组</button>
<ul>
<li v-for="(item,index) in itemList"> {{index}} {{item}} </li>
</ul> <table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>工作</th>
<th>地址</th>
</tr>
<tr v-for="item in dataList" :key="item.id" v-if="item.id > 2">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.job }}</td>
<td>{{ item.address }}</td>
</tr>
</table>
</div> <script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
itemList: ['曹操', '诸葛亮', '刘备', '孙权', '周瑜', '董卓'],
dataList: [
{id:1, name:'曹操', age:19, job:'大王', address:'许都'},
{id:2,name:'诸葛亮', age:19, job:'丞相', address:'许都'},
{id:3,name:'刘备', age:19, job:'大王', address:'许都'},
{id:4,name:'孙权', age:19, job:'大王', address:'许都'},
{id:5,name:'董卓', age:19, job:'大王', address:'许都'}
]
},
methods: {
updateItemList: function(){
//this.itemList[1] = '贾宝玉'
//this.itemList.push('贾宝玉');
//this.itemList.pop();
//this.itemList.reverse();
Vue.set(this.itemList, 1, '焦宝玉')
}
}
})
</script>
</body>
</html>

vue列表渲染

vue对象和视图的更多相关文章

  1. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  2. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  3. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  5. 我所理解的Vue——学习心得体会1(Vue对象)

    初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...

  6. Vue对象提供的属性功能

    一. 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种: 1. 使用Vue.filter()进行全局定义 示例: < ...

  7. VUE(vue对象的简单属性)

    一:全局过滤器和局部过滤器 ps:不管是局部过滤器还是全局过滤器,一定都要有renturn 返回 <!DOCTYPE html> <html lang="en"& ...

  8. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  9. Vue axios 返回数据绑定到vue对象问题

    在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报 ...

随机推荐

  1. Can't locate Log/Dispatch.pm in @INC /Makefile out-of-date with respect to Makefile.PL

    mha check的时候报错问题解决:   # masterha_check_ssh --conf=/data/mha/app1.cnf Can't locate Log/Dispatch.pm in ...

  2. TX1 ssh配置

    执行: sudo apt-get install openssh-server 验证: sudo ps -e |grep ssh 回车-->有sshd,说明ssh服务已经启,如果没有则输入命令s ...

  3. CV_Assert

    转:http://blog.csdn.net/ding977921830/article/details/46376847 Checks a condition at runtime and thro ...

  4. monkeyRunner

    MonkeyRunner工具是使用Jython(使用Java编程语言实现的Python)写出来的,它提供了多个API,通过monkeyrunner API 可以写一个Python的程序来模拟操作控制A ...

  5. LeetCode: 485 Max Consecutive Ones(easy)

    题目: Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: ...

  6. ObjectArx 中反应器Reactor的使用

    反应器类派生于AcRxObject而不是AcDbObject,因为他们不是数据库对象,没有ID,拥有关系也不适用. 不同类型的反应器接收不同类型的通知事件.派生于AcDbDatabaseReactor ...

  7. HDU1501【简单DP】

    题意: 从a串和b串中顺序地取出是否能组成c串: 思路: dp[i][j] 代表从a串中取了i个,b串中取了j个的情况: #include <bits/stdc++.h> using na ...

  8. 七大查找算法(Python)

    查找算法 -- 简介 查找(Searching)就是根据给定的某个值,在查找表中确定一个其关键字等于给定值的数据元素.    查找表(Search Table):由同一类型的数据元素构成的集合    ...

  9. 我叫mt3.0更新公告

    1.增加卡牌: (1)炮姐,种族:牛头人,职业:元素萨满,可在任务中使用万能碎片兑换,最多兑换5张: (2)娘子,种族:德莱尼人,职业:治疗萨满,进化材料为死亡视察者: 详情点击查看>>& ...

  10. APP为什么会被打回来??

    APP的设置界面, 按钮使用了类似iPhone的操作方式以及icon的圆角设计  ->  重新设计 APP的年龄设置太低  ->  改年龄 APP里有实物奖励  ->  免责声明, ...