1.创建第一个Vue案例

1. 引入Vue.js
   2. 创建Vue对象
      el : 指定根element(选择器)
      data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现

<div id="test">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div> <script type="text/javascript">
new Vue({
el: '#test',
data: {
msg: 'helloVue'
}
})
</script>

  

2.列表

1. 在data中初始数组数据
   2. 在页面中遍历显示: v-for
       数据: [
                {id : 1, name : '张三'},
                {id : 2, name : '李四'},
                {id : 3, name : '王五'}
            ]

<div id="app">
<ul>
<li v-for="(todo, index) in todos">{{index+1}}----{{todo.id+'+++'+todo.name}}</li>
</ul>
</div> <script type="text/javascript">
new Vue({
el: '#app',
data: function () { return {
todos: [
{id : 2, name : '张三'},
{id : 3, name : '李四'},
{id : 5, name : '王五'}
]
}
}
})
</script>

3.事件

1. 绑定监听的指令:
       v-on:xxx="函数名或函数调用"
      @xxx="函数名或函数调用"
   2. 定义事件处理的函数:
       methods : {
            函数名 : function(){...}
         }

<div id="app"><!--就是mvvm中的view-->
<p>{{msg}}</p>
<!--<button v-on:click="reverse">倒序</button>-->
<button @click="reverse">倒序</button>
</div> <script type="text/javascript">
new Vue({ // vm对象
el : '#app',
data : { // 一般数据 model对象
msg: 'I Love You!'
},
methods: { // 事件回调函数
reverse () {
//this是Vue实例对象
this.msg = this.msg.split('').reverse().join('')
}
}
})
</script>

3.综合使用

1. 页面指令:
      v-model
     @click
     @keyup.enter
     v-for / $index
     v-text
  2. Vue对象
      初始化数据: data
      事件处理函数: methods

<div id="app">
<input type="text" v-model="inputTodo" @keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos">
{{todo.name}}
<button @click="removeTodo(index)">X</button>
</li>
</ul>
</div> <script type="text/javascript">
new Vue({
el : '#app',
data : {
inputTodo: '',
todos: [
{id : 2, name : '吃饭'},
{id : 3, name : '睡觉'},
{id : 5, name : '打豆豆'}
]
},
methods : {
addTodo () {
// 判断是否是正常输入
var inputTodo = this.inputTodo.trim()
if(!inputTodo) {
return
}
// 根据输入创建todo对象
var todo = {
id: Date.now(),
name: inputTodo
}
// 添加到todos
this.todos.unshift(todo)
// 清除输入数据
this.inputTodo = ''
},
removeTodo (index) {
this.todos.splice(index, 1)
}
}
})
</script>

4.模板语法

1. 表达式 :
      语法: {{exp}} 或 {{{exp}}}
      功能: 向页面输出数据
      可以调用对象的方法
  2. 强制数据绑定:
      完整写法:
      v-bind:xxx='yyy' //yyy会作为表达式解析执行
      简洁写法:
      :xxx='yyy'
  3. 事件监听:
      完整写法:
      v-on:keyup='xxx'
      v-on:keyup='xxx(参数)'
      v-on:keyup.enter='xxx'
      简洁写法:
     @keyup='xxx'
     @keyup.enter='xxx'

<div id="app">

  <h2>1. 表达式</h2>
<p>{{message}}</p>
<p>{{message.toUpperCase()}}</p>
<h2>2. 强制数据绑定:</h2>
<a :href="url">跳转</a> <h2>3. 事件监听:</h2>
<input type="text" @keyup.enter="test">
<input type="text" @keyup.enter="test2($event, 'abc')"> <!--模板页面自动去vm对象中找属性-->
</div> <script type="text/javascript">
var vm = new Vue({
el : '#app',
data : {
message: 'atguigu.com',
url: 'http://www.xxxx.com'
},
methods : {
test (event) {
alert(event.target.value)
},
test2 (event, msg) {
alert(event.target.value + '----'+msg)
}
}
})
console.log(vm) // 数据代理(vm代理data中数据的操作(读/写))
vm.message = "xfzhang"

5.计算属性

计算属性
        1. 在computed属性对象中定义计算属性的方法
        2. 在页面中使用{{方法名}}来显示计算的结果
   监视属性:
       1. 通过通过vm对象的$watch()或watch配置来监视指定的属性
       2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算
  计算属性高级:
      1. 通过get/set方法实现对属性数据的显示和监视
      2. 计算属性存在缓存, 多次读取只执行一次

<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名1(单向): <input type="text" placeholder="Full Name" v-model="fullName1">--{{fullName1}}<br>
姓名2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div> <script type="text/javascript">
var vm = new Vue({
el : '#demo',
data : {
firstName: '上官',
lastName: '婉儿',
fullName2: '上官-婉儿'
},
computed: {
fullName1 () { // 相当于只是指定了get
console.log('fullName1()')
return this.firstName + '-' + this.lastName
},
fullName3: {
get () {// 获取当前属性值, 当读取当前属性值时回调
return this.firstName + '-' + this.lastName
},
set (value) { // 监视当前属性值的变化, 当属性值发生变化时调用
var names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
}, watch: {
firstName (value) {
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
}) // 监视lastName
vm.$watch('lastName', function (value) {
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
</script>

6.class与style绑定

动态绑定class
      :class="a" a是一个data属性
      :class="{ 'class-a': isA, 'class-b': isB }" 其中isA/isB是布尔型data属性
      :class="[classA, classB]" 其中classA/classB是字符串值
  动态绑定style
      :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性

<div id="demo">
<p class="classB" :class="a">测试v-bind:class 变量语法</p>
<p :class="{classA:isA, classB:isB}">测试v-bind:class 对象语法</p>
<p :class="['classA', classB]">测试v-bind:class 数组语法</p> <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">测试v-bind:style</p>
</div> <script type="text/javascript">
new Vue({
el : '#demo',
data : {
a: 'classA',
isA: false,
isB: true,
classB: 'classB',
activeColor: 'green',
fontSize: 30
}
})
</script>

7.条件渲染

切换一个元素:
        v-if
        v-else
        v-show
   切换多个元素
       <template v-if="ok"> //不能用v-show
   注意:
      如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好

<div id="demo">
<h1>测试: 切换一个元素</h1>
<p v-if="ok">aaaaa</p>
<p v-else>bbbbbb</p> <p v-show="ok">sssssss</p> <h1>测试: 切换多个元素</h1> <template v-if="ok">
<h2>xxxx</h2>
<h2>yyyy</h2>
<h2>zzzzz</h2>
</template> <button @click="ok=!ok">切换</button>
</div> <script type="text/javascript">
new Vue({
el : '#demo',
data : {
ok: false
}
})
</script>

8.列表渲染

1. 遍历显示数组 : v-for / index
   2. 遍历显示对象 : v-for / key

<div id="demo">

  <h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in filterPersons">
{{index}}--{{p.name}}--{{p.age}}
--<button @click="removeP(p)">删除</button>
--<button @click="updateP(p, {name:'Cot', age:18})">更新</button>
</li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[1]">
{{key}}----{{value}}
</li>
</ul>
</div> <script type="text/javascript">
new Vue({
el : '#demo',
data : {
persons: [
{name: 'Tom', age: 12},
{name: 'Jack', age: 15},
{name: 'Bob', age: 14}
]
}, methods: {
removeP (p) {
// 得到元素在数组中下标
var index = this.persons.indexOf(p)
// 删除
this.persons.splice(index, 1)
},
updateP (oldP,newP) {
// 得到元素在数组中下标
var index = this.persons.indexOf(oldP)
console.log(index)
// 更新下标所对应的数组元素
// this.persons[index] = newP
this.persons.splice(index, 1, newP)
}
}, computed: {
filterPersons () {
// 哪些数组元素会放入返回的数组中? 只有回调函数返回值为true的p
return this.persons.filter(p => p.name.indexOf('o')>=0)
}
}
})
</script>

9.方法与事件处理器

1. 绑定监听:
      v-on:xxx="fun"
      @xxx="fun"
      @xxx="fun(参数)"
      默认事件形参: event
      隐含属性对象: $event
  2. 事件修饰符:
      .prevent : 阻止事件的默认行为 event.preventDefault()
      .stop : 停止事件冒泡 event.stopPropagation()
  3. 按键修饰符
      .keycode : 操作的是某个keycode值的健
      .enter : 操作的是enter键

<div id="example">

  <h2>1. 绑定监听</h2>
<button v-on:click="test1">测试1</button>
<button @click="test1">测试2</button>
<button @click="test2('abc', $event)">测试3</button> <h2>2. 事件修饰符</h2>
<!--阻止事件的默认行为-->
<p><a href="http://baidu.com" @click.prevent="test3">百度</a></p>
<!--停止事件冒泡-->
<div style="background: red;width: 300px;height: 300px" @click="test4">
<div style="background: yellow;width: 200px;height: 200px" @click.stop="test5"></div>
</div> <h2>3. 按键修饰符</h2>
<input type="text" @keyup.enter="test6">
<input type="text" @keyup.65="test6">
</div> <script type="text/javascript">
new Vue({
el : '#example',
data : { },
methods : {
test1 (event) {
alert(event.target.innerHTML)
},
test2 (msg, event) {
alert(msg + '---' + event.target.innerHTML)
},
test3 () {
alert('点击链接')
},
test4 () {
alert('点击了外部div')
},
test5 () {
alert('点击了内部div')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>

10.表单控件绑定

1. 使用v-model对表单项数据双向绑定
        text/textarea
        checkbox : 绑定boolean/string值
        radio
        select
   2. 失去焦点才更新: .lazy
   3. 自动去除两端空格: .trim

<div id="demo">
<input type="text" v-model="msg"><br>
<textarea cols="30" rows="5" v-model="msg"></textarea>
<p>{{msg}}</p> <hr>
<input type="checkbox" v-model="ok"> {{ok}}<br>
<input type="checkbox" name="students" value="Tom" v-model="selectStudents">TOM
<input type="checkbox" name="students" value="Jack" v-model="selectStudents">JACK
<input type="checkbox" name="students" value="Bob" v-model="selectStudents">BOB
{{selectStudents}}
<hr> <input type="radio" name="sex" value="male" v-model="sex">男
<input type="radio" name="sex" value="female" v-model="sex">女
{{sex}}
<hr> <select name="city" v-model="selectCityId">
<option :value="city.id" v-for="city in citys">{{city.name}}</option>
</select>
{{selectCityId}}
<hr> <input type="text" placeholder="失去焦点才同步数据" v-model.lazy="msg2">{{msg2}}
<input type="text" placeholder="自动trim" v-model.trim="msg3">---{{msg3}}---
</div> <script type="text/javascript">
new Vue({
el : '#demo',
data : {
msg: 'atguigu',
ok: true,
selectStudents: ['Jack'],
sex: 'female',
citys: [
{id: 1, name: 'BJ'},
{id: 3, name: 'SZ'},
{id: 5, name: 'SH'}
],
selectCityId: 3,
msg2: '',
msg3: ''
}
})
</script>

我的Vue朝圣之路2的更多相关文章

  1. 我的Vue朝圣之路1

    1. Vue是什么? 1). 一位华裔前Google工程师开发的前端js库         2). 一个MVVM框架         3). 核心概念              * 数据绑定      ...

  2. Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件

    (标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...

  3. vue学习之路 - 4.基本操作(下)

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  4. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  5. Vue学习之路---No.4(分享心得,欢迎批评指正)

    这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...

  6. 后端开发者的Vue学习之路(一)

    目录 前言: iview组件库示例 element组件库示例 Vue的介绍 兼容性: 学习Vue需要的前置知识: MVVM模型 补充: 安装/导入 导入Vue 安装 两种方式的区别: HelloWor ...

  7. Vue学习之路第一篇(学习准备)

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  8. Vue学习之路---No.1(分享心得,欢迎批评指正)

    首先为了打消大家对Vue.js存在的顾虑,先通过大家所熟知的JQ作为对比. 都知道JQ的语法相对简单.清楚.使用方便.功能齐全: 那么Vue.js呢,同样的,Vue.js与JQ在很多地方都是相同之处, ...

  9. Vue学习之路---No.2(分享心得,欢迎批评指正)

    昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...

随机推荐

  1. 使用chrome浏览器调试移动端网页(非模拟访问)

    1. 使用数据线连接手机与电脑 2. 打开手机调试模式 参考:http://jingyan.baidu.com/article/f79b7cb35ada4d9145023e63.html 本人使用的m ...

  2. webapp接口安全设计思路

    在做webqq或者说app开发的时候,免不了会有接口是有权限的(如查询用户敏感信息等),这时接口安全设计思路就非常重要了. 简单一点,在APP中保存登录数据,每次调用接口时传输 程序员总能给自己找到偷 ...

  3. 微信小程序敏捷开发实战

    wxml->wcc编译->javascript 用户javascript-> wawebview->view 小程序原理 微信 小程序-> webview appserv ...

  4. js中判断变量不为空或null

    var content=$("content").val(); if(!content){      alert("请输出内容!");      return; ...

  5. HAProxy+Keepalived高可用负载均衡

    一 基础准备 1.1 部署环境及说明 系统OS:CentOS 6.8 64位 HAProxy软件:HA-Proxy version 1.5.18 Keepalived软件:keepalived-1.3 ...

  6. linux学习(4):linux常用命令(50个)

    linux常用命令(50个) 1. find 基本语法参数如下: find [PATH] [option] [action] # 与时间有关的参数: -mtime n : n为数字,意思为在n天之前的 ...

  7. semi-join子查询优化 -- LooseScan策略

    LooseScan执行semi-join子查询的一种策略. 我们将通过示例来演示这种松散(LooseScan)策略.假设,我们正在查找拥有卫星的国家.我们可以通过以下查询获得它们(为了简单起见,我们忽 ...

  8. pandas filter数据筛选

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...

  9. 改进初学者的PID-测量的比例介绍

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  10. Pytest单元测试框架-Pytest环境安装

    unittest是python自带的单元测试框架,它封装好了一些校验返回的结果方法和一些用例执行前的初始化操作,使得单元测试易于开展,因为它的易用性,很多同学也拿它来做功能测试和接口测试,只需简单开发 ...