Vue.js简介
·
这里写目录标题
- 开发的小工具
- git-bash
- vue-devtools扩展（chrome）
- 创建vue实例
- methods方法定义
- computed计算属性
- watch 监听
- filters过滤器
- 插值表达式中过滤
- v-bind属性绑定中使用过滤器
- 数据绑定
- 样式
- 绑定内联样式
- 绑定样式类
- 内置指令
- v-model
- v-text
- v-html
- v-bind
- v-on
- v-for
- v-if和v-show
开发的小工具
git-bash
直接下载安装即可，类似于windows的cmd，但是交互性更好
vue-devtools扩展（chrome）
- 使用git clone vue-devtools
git clone https://github.com/vuejs/vue-devtools.git - npm install
- num run build
- 在chrome中添加插件
创建vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是第一个Vue.js案例</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name :'Vue实例创建成功！'
}
})
</script>
</body>
</html>
{{name}}是vue特有的插值语法，可以将data中的name数据绑定到p元素中
methods方法定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是第一个Vue.js案例</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showInfo">请点击</button>
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name :'Vue实例创建成功！'
},
methods:{
showInfo(){
this.name='触发单击事件'
}
}
})
</script>
</body>
</html>
button按钮上添加了@click属性，表示绑定单击事件，事件处理方法是showInfo
methods中定义了showInfo,用于改变name的内容
computed计算属性
观察和相应vue实例上的数据变动，当一些数据需要随着其他数据变动而变动时，就需要使用computed计算属性。
在事件的处理方法中，this指向的Vue实例的计算属性结果会被缓存起来，只有依赖的响应式属性变化时，才会重新计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是第一个Vue.js案例</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="num++">请点击</button>
<p>{{showInfo}}</p>
<p>{{num}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num:1,
},
computed:{
showInfo(){
return this.num
}
}
})
</script>
</body>
</html>
插值语法将num和showInfo绑定到了页面中
computed中定义了showInfo，返回结果是num，表明，当num变化时，showInfo的返回值也要跟着变化
按钮中，click事件是num++，也就是每点击一次，num++，vue监控到num变化，则调用showInfo，页面中的showInfo对应的this.num也要++
watch 监听
自动监听状态的变化
filters过滤器
插值表达式中过滤
{{data|过滤器}}
<body>
<div id="app">
<div>{{message | toUpcase}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'helloworld'
},
filters: {
// 将 helloworld 转换为 HELLOWORLD
toUpcase (value) {
return value ? value.toUpperCase() : ''
}
}
})
</script>
</body>
插值表达式|后面跟着的是vue中filters方法；
|被称为管道符，管道符前面的是数据，数据作为参数，传递到后面的方法中执行
方法的返回值作为最终的结果展示在页面上
v-bind属性绑定中使用过滤器
<body>
<div id="app">
<div v-bind:id="dataId | formatId">helloworld</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
dataId: 'dff1'
},
filters: {
formatId(value) {
// 字符串处理
return value ? value.charAt(1) + value.indexOf('d') : ''
}
}
})
</script>
</body>
v-bind:能够绑定vue中的数据和id属性
|还是管道，把dataId的值作为参数传递到formatId中，根据return返回一个值
value.charAt(1)表示获取字符串索引1对应的字符
value.indexOf(‘d’)表示获取字符‘d’对应的索引（0）
最终在html页面中得到了属性id=’f0‘
数据绑定
样式
绑定内联样式
<body>
<div id="app">
<!-- 绑定样式属性值 -->
<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
<!-- 绑定样式对象 -->
<div v-bind:style="myDiv"></div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
myDiv: {backgroundColor: 'red', width: '100px', height: '100px'},
pink: 'pink',
width: '100%',
height: '200px'
}
})
</script>
</body>
- 在第二处有v-bind的地方，把style绑定在了myDiv上
- myDiv定义在vue脚本中
- 同样的，第一处v-bind，说明这块儿也绑定了vue，data中的数据pink,width,height
绑定样式类
<body>
<div id="app">
<div v-bind:class="{box}">我是box
<div v-bind:class="{inner}">我是inner1</div>
<div v-bind:class="{inner}">我是inner2</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
box: 'box',
inner: 'inner'
}
})
</script>
</body>
- v-bind地方开始绑定
- box告诉页面去vue，data中去找box
- vue把box对应的值’box’返回给页面
- 最终，页面的语句是class=“box”
- 页面此时再去css中找.box对应的样式是什么
内置指令
v-model
v-model通常用于实现数据双向绑定，用在表单元素上
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-model指令'
}
})
</script>
</body>
- 双向绑定的意思是input元素中的文本通过vue的msg来得到，此时页面中会显示’v-model’，当改变页面的值时，vue中的data的内容也会同步改变
v-text
在dom元素内部插入文本内容
v-html
在dom元素内部插入html标签内容
v-bind
单项绑定
v-on
事件监听指令，直接与事件类型配合使用
<div id="app">
<p>{{msg}}</p>
<button v-on:click="showInfo">请单击</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {msg: '请单击按钮查看内容'},
methods: {
showInfo () {
this.msg = '我是v-on指令'
}
}
})
</script>
- v-on可以为按钮绑定事件，事件就是showInfo,事件的具体执行在vue中
- v-on还可以监听按键：v-on:keyup.enter=""表示监听enter按键
v-on还可以自定义事件的行为
| 修饰符 | 说明 |
|---|---|
| .stop | 阻止事件冒泡（父事件也就是外部事件不会跟着出来） |
| .prevent | 阻止默认事件（像单击跳转网页这种，不会出现） |
| .capture | 事件捕获，与事件冒泡的顺序相反 |
| .self | 将事件绑定到自身，只有自身能触发 |
| .once | 事件只触发一次 |
v-for
页面列表渲染，用来循环数组
<div id="app">
<div v-for="(item,key) in list" data-id="key">
索引是：{{key}}，元素内容是：{{item}}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
})
</script>
- 页面通过list找到vue data中的list数组，并且返回索引和数值
v-if和v-show
v-show是操作元素的display属性，v-if是进行删除和重新创建
更多推荐
26
0- 0
已为社区贡献1条内容
所有评论(0)