-
v-for 循环, 添加 :key 提升渲染效率/性能, 要求每一项循环的key 不一样, 也可用 :key="index", 如果对列表进行频繁的变更, 比如排序时, 使用 index 就不适合了
<li v-for="(item index) of list" :key="item">{{item}}</li>v-for=“item of list”，v-for表示循环list，依次输出item ，：key可以提升遍历效率，但key 值不能相同；key值相同时，用index做区别
查看全部 -
v-if 是否存在，通过删除或加载DOM元素来实现显隐。
v-show 是否显示, 其实就是控制 display: block || none，通过设置DOM的display属性来实现显隐；
如果一个DOM需要频繁的显隐，那么使用v-show更好，这样效率高。如果是一次性的显隐，那么直接使用v-if即可；
v-if和v-show】：均用来控制dom显示/隐藏，当值为true则显示，为false则隐藏。
if 和 show的一大区别：
在于if是通过销毁dom的方式实现隐藏，而show是通过隐藏dom的方式实现的，具体需要灵活使用。 若只需不频繁切换隐藏显示时用v-if可以，其会使元素从dom中清除，每次切换都得重新渲染，加载。 若需频繁切换时用v-show，它会自动加上display：none，并没有从dom中清除，这样就不用重新渲染，性能好。
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Vue-计算属性和监听器</title>
<meta charset="utf-8">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" name="firstName" v-model="firstName" />
名：<input type="text" name="lastName" v-model="lastName" />
<div><h1 >您好！{{firstName}}{{lastName}},欢迎你来到Vue世界！</h1></div>
<div><h1 >您好！{{fullName}},欢迎你来到Vue世界！</h1></div>
<div >计数器：{{count}}</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root", //挂载点
data: { //数据
firstName: '',
lastName: '',
count: 0
},
computed: { //计算属性
fullName : function(){
return this.firstName + ' ' + this.lastName
}
},
watch: { //监听器
firstName : function(){
this.count++
},
lastName : function(){
this.count++
}
}
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Vue-计算属性和监听器</title>
<meta charset="utf-8">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" name="firstName" v-model="firstName" />
名：<input type="text" name="lastName" v-model="lastName" />
<div><h1 >您好！{{firstName}}{{lastName}},欢迎你来到Vue世界！</h1></div>
<div><h1 >您好！{{fullName}},欢迎你来到Vue世界！</h1></div>
</div>
<script type="text/javascript">
new Vue({
el: "#root", //挂载点
data: { //数据
firstName: '',
lastName: ''
},
computed: { //计算属性
fullName : function(){
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
查看全部 -
methods与computed的区别：
使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
计算属性：
computed: {//return data中的数据发生改变才会触发该方法--返回一个新的结果
数据名 ： function(){
return ...
}
}
侦听器：
watch:{//data中的数据发生改变时，触发该方法
data中的数据名 ： function(){
方法体
}
}
computed：可以对已有的data属性进行计算，返回一个需要的值，并且在data属性值发生变更的时候也会相应的变化
watch：可以对data和computed的任意属性值进行侦听，当侦听到变化的时候，可以执行自定义的任何函数
查看全部 -
数据单向绑定：数据决定页面的显示，但是页面无法决定数据里面的内容
使用v-bind进行单向数据绑定；
数据双向绑定：数据与页面的显示会同时变化，使用v-model进行双向数据绑定
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue：属性绑定和双向数据绑定</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div title="This is Hello World">Hello World</div> -->
<!--
事件绑定：v-on: 可简写成@
属性绑定：v-bind: 可简写成:
-->
<div v-bind:title="title">Hello World</div>
</div>
<script type="text/javascript">
new Vue({
el : "#root",
data : {
title: "This is hello world"
}
})
</script>
</body>
</html>
查看全部 -
事件绑定：v-on: 可简写成@
属性绑定：v-bind: 可简写成:
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Vue入门</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--
v-text: 会进行转译
v-html: 不会进行转译
v-on: 用于绑定事件
-->
<div id="root">
<h1 >{{msg}}--{{number}}</h1>
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
<div v-text="content"></div>
<br>
<div v-html="content"></div>
<div v-on:click="handleClick">{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: { /*数据项*/
msg: "Hello World",
number: 123,
content: "<h1 style='color:red;'>Hello World</h1>"
},
methods: {
handleClick : function(){ //事件方法
this.content="world"
}
}
})
</script>
</body>
</html>
查看全部 -
v-text: 会进行转译
v-html: 不会进行转译
查看全部 -
【插值表达式】：{{msg}}
【数据占位符】：{{data}}，对应data属性的key；
【数据模板】：v-text和v-html，对应data属性的key，使用方法同数据占位符，其中：v-text会直接输出html语句，v-html不会将html语句输出；
【dom模板】：template属性能输出dom模板；
【绑定事件】：v-on:click="方法名"，简写为 @click="方法名"。事件对应methods属性中的 方法名： function(){}。在事件方法中可以用实例中data：{}中的数据，this.数据名。
【绑定dom属性】：v-bind:property='data'，简写为 :property='data' 如 :title='data'，data对应为data属性的key；
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Vue入门</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script type="text/javascript">
/*创建vue实例*/
new Vue({
el: "#root", /*el 绑定dom*/
data: { /*数据绑定*/
msg: "Hello World"
}
})
</script>
</body>
</html>
查看全部 -
<style scoped></style>
scoped 定义了作用域, 仅对当前局部组件有效
查看全部 -
template 内只能包含一个根元素
<template> <div> <input v-model="inputValue" /> <todo-item></todo-item> </div> </template>
import TodoItem from './components/TodoItem' export default { components: { //注册组件 'todo-item': TodoItem } data() { // data 是一个方法 return { inputValue: '', list: [] } } }查看全部 -
如果父组件监听到子组件的事件, 执行 handleDelete
<todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></todo-item>
父--->子组件传值是通过属性的方式, 如 :index="index" :cont="cont"
子--->父组件传值通过发布的方式, this.$emit('delete', this.index)
子组件内:
Vue.component('todo-item', { props: ['content', 'index'], template: '<li @click="handleClick">{{content}}</li>', methods: { handleClick: function() { this.$emit('delete', this.index) } } })父组件内:
new Vue({ methods: { handleDelete: function(index){ this.list.splice(index, 1); } } })查看全部
举报