Vue
<script type="text/javascript" src="js/vue.min.js"></script>
官网:https://cn.vuejs.org/v2/guide/
- vue实例化的对象中, 常见的参数为:
- el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里，例如
el:'#app'
- data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去例如， data:{
title:'张三',
num:10,
msg:'abcdef',
ok:false,
url:'http://www.baidu.com'
},
- methods: 添加事件,例如，v-on:click 可以给当前vue对象添加方法, 一般我们都会把方法放在这个对象里面，例如， methods: {
func:function(){
alert('func')
}
}
<button v-on:click="func">按钮</button>
- computed: 后面会学到, 这个是计算属性, 我们可以给data里面的值添加一些管理,放在这里，例如，computed: {
newMsg:function(){
return this.msg.split('').reverse().join('')
}
}
<div id="app"> {{ newMsg }} </div>
- watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法.
例如，watch: {
msg: function(newValue, oldValue){
console.log(newValue) // 打印新的值
console.log(oldValue) // 打印老的值
}
},
- vue 中一般会使用小胡子语法: {{ }} (插入表达式)
- vue 中添加点击事件使用的不是 onclick , 而是 v-on:click
- vue 中有指令的概念: 以 v- 开头 ,这里是参考的 angular 框架, angular 框架以: ng- 开头
- v-bind: 这个方法是绑定的意思, 主要是把 data 中的属性和 HTML 页面中的属性值绑定到一起
- 事件在 vue 中: v-on: click 表示. 可以简写成: @click
- 简写的形式经常使用, 但是需要了解 v-on:的意义
- v-bind: 绑定方法也可以简写: 简写为 :
- 小胡子语法中可以进行简单的逻辑运算,这个属于了解层次, 知道就够了, 一般不会这样用
第一种
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
第二种
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
侦听属性：
侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
<head>
<script src="./vue.js"></script>
<script>
window.onload = function (){
var vm = new Vue({
el:'#app',
data:{
msg:'haha'
},
watch: {
msg:function(newvalue,oldvalue){
alert('哈哈')
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
{{ msg }}
</div>
</body>
- 计算属性总体来说就是为了把一些data中属性的逻辑运算移除小胡子以外, 这是 vue 作者针对这个框架进行的优化, 作者推荐这样使用, 但是不会的话可以不用. 没有实际意义
- 监听属性,最主要的就是记住 watch 这个关键字在所有的编程语言中差不多都是监听,监视的意思. 通过这个属性, 我们可以得到别的属性什么时候发生了变化, 这样对于我们来说非常重要, 在公司, 很多时候会用到这个方法. watch 监听的属性, 属性一旦发生变化,就会调用对应的方法, 方法中有两个参数, 一个是老的值, 一个是新值.
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
v-show指令，用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
v-if和v-show的用法.png
第一种：可以给v-bind:class传一个对象，以动态的切换class
<!-- 第一种方法 --> # data里面给这两个属性加true或false
<div :class="{box:isHave, divbox:isActive}">第一个div</div>
第二种：也可以给v-bind:class传一个对象引用
<!-- 第二种方法 --> objNmae:{box:true,divbox:true}
<div :class="objName">第一个div</div>
第三种：可以给v-bind:class传一个数组，以应用一个 class 列表
<!-- 第三种方法 -->
# 在数组里面添加选择器的名字 data:{ first: box, second: divbox}
<div class="box divbox"></div>
<div v-bind:class="[first, second]"></div>
第四种：如果你也想根据条件切换列表中的 class，可以用三元表达式
<!-- 第四种方法 --> # isHave为true那么class=box，否则为divbox
<div :class="[isHave ? 'box' : 'divbox']"></div>
Style 绑定
第一种：v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名，
<!-- 第一种 -->
<div :style="{color:colorName, fontSize:fontName}">item 1</div>
第二种：也可以给v-bind:style传一个对象引用
<!-- 第二种 -->
<div :style="objName">item 1</div>
第三种：v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
<!-- 第三种 -->
<div :style="[first, second]">item 1</div>
1.引入
vue.js作为一个js库来使用<script type="text/javascript" src="js/vue.min.js"></script>
官网:https://cn.vuejs.org/v2/guide/
2.Vue使用
- vue使用的时候,必须要通过 new Vue( ) 来实例化一个对象- vue实例化的对象中, 常见的参数为:
- el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里，例如
el:'#app'
- data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去例如， data:{
title:'张三',
num:10,
msg:'abcdef',
ok:false,
url:'http://www.baidu.com'
},
- methods: 添加事件,例如，v-on:click 可以给当前vue对象添加方法, 一般我们都会把方法放在这个对象里面，例如， methods: {
func:function(){
alert('func')
}
}
<button v-on:click="func">按钮</button>
- computed: 后面会学到, 这个是计算属性, 我们可以给data里面的值添加一些管理,放在这里，例如，computed: {
newMsg:function(){
return this.msg.split('').reverse().join('')
}
}
<div id="app"> {{ newMsg }} </div>
- watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法.
例如，watch: {
msg: function(newValue, oldValue){
console.log(newValue) // 打印新的值
console.log(oldValue) // 打印老的值
}
},
- vue 中一般会使用小胡子语法: {{ }} (插入表达式)
- vue 中添加点击事件使用的不是 onclick , 而是 v-on:click
3.Vue 模板语法
- 我们可以通过小胡子语法 {{ }} 向 HTML 中添加数据- vue 中有指令的概念: 以 v- 开头 ,这里是参考的 angular 框架, angular 框架以: ng- 开头
- v-bind: 这个方法是绑定的意思, 主要是把 data 中的属性和 HTML 页面中的属性值绑定到一起
- 事件在 vue 中: v-on: click 表示. 可以简写成: @click
- 简写的形式经常使用, 但是需要了解 v-on:的意义
- v-bind: 绑定方法也可以简写: 简写为 :
- 小胡子语法中可以进行简单的逻辑运算,这个属于了解层次, 知道就够了, 一般不会这样用
4.计算属性和侦听属性
计算属性第一种
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
第二种
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
侦听属性：
侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
<head>
<script src="./vue.js"></script>
<script>
window.onload = function (){
var vm = new Vue({
el:'#app',
data:{
msg:'haha'
},
watch: {
msg:function(newvalue,oldvalue){
alert('哈哈')
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
{{ msg }}
</div>
</body>
- 计算属性总体来说就是为了把一些data中属性的逻辑运算移除小胡子以外, 这是 vue 作者针对这个框架进行的优化, 作者推荐这样使用, 但是不会的话可以不用. 没有实际意义
- 监听属性,最主要的就是记住 watch 这个关键字在所有的编程语言中差不多都是监听,监视的意思. 通过这个属性, 我们可以得到别的属性什么时候发生了变化, 这样对于我们来说非常重要, 在公司, 很多时候会用到这个方法. watch 监听的属性, 属性一旦发生变化,就会调用对应的方法, 方法中有两个参数, 一个是老的值, 一个是新值.
5.条件渲染
v-if可以控制元素的创建或者销毁v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
v-show指令，用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
v-if和v-show的用法.png
6.Class 与 Style 绑定
Class绑定第一种：可以给v-bind:class传一个对象，以动态的切换class
<!-- 第一种方法 --> # data里面给这两个属性加true或false
<div :class="{box:isHave, divbox:isActive}">第一个div</div>
第二种：也可以给v-bind:class传一个对象引用
<!-- 第二种方法 --> objNmae:{box:true,divbox:true}
<div :class="objName">第一个div</div>
第三种：可以给v-bind:class传一个数组，以应用一个 class 列表
<!-- 第三种方法 -->
# 在数组里面添加选择器的名字 data:{ first: box, second: divbox}
<div class="box divbox"></div>
<div v-bind:class="[first, second]"></div>
第四种：如果你也想根据条件切换列表中的 class，可以用三元表达式
<!-- 第四种方法 --> # isHave为true那么class=box，否则为divbox
<div :class="[isHave ? 'box' : 'divbox']"></div>
Style 绑定
第一种：v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名，
<!-- 第一种 -->
<div :style="{color:colorName, fontSize:fontName}">item 1</div>
第二种：也可以给v-bind:style传一个对象引用
<!-- 第二种 -->
<div :style="objName">item 1</div>
第三种：v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
<!-- 第三种 -->
<div :style="[first, second]">item 1</div>