vuejs 的自我学习

一，绑定方法v-bind
1，绑定方法：<a v-bind:href="url"></a>
缩写：<a :href="url"> </a>
2,监听方法： <a v-on:click="do"></a>
缩写：<a @click = "do"></a>
二，vue实例
1，构造器
var vm = new Vue（{
//选项
}）
缩写 new Vue（{
//选项
}）
2，属性和方法
3，条件语句v-if，v-else，v-else-if
4，根据条件展示元素v-show
example：
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
 
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
</body>
5，循环语句v-for=“site in sites”
example1：
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
v-for 可以通过一个对象的属性来迭代数据
example2：可以输对象
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>
example3:键值对（value,key）
<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>
 
<script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>
 
example4:索引
<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>
example4:循环整数
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
<script>
new Vue({ el: '#app' })
</script>
总结：v-for循环输出，键值对，索引，整数，对象。vue中存在视图模板template。
6，计算属性computed，用于处理复杂逻辑，属性默认getter，也存在setter。
区别：computed与methods，computed是将数据缓存而执行，methods在重新渲染时，函数重新调用执行，不缓存。
7，v-bind设置HTML样式（style）和属性（class）。返回结果可以是字符串，对象或数组。
8，事件处理器v-on，常用于button，submit。
example：
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
9，修饰符
（1）事件修饰符：.stop,.prevent,.capture,.self,.once;
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件至少触发一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
（2）按键修饰符:.enter,.tab,.delete,.esc,.space,.down,.left,.right,.ctrl,.alt,.shift,.meta
example;
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
example:
<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
10，表单：输入框 input和textarea，复选框checkbox，单选按钮radio
11，组件component（重点）
（1）全局组件component
注册全局组件语法：Vue.component(tagName，options)
调用：<tagName></tagName>
example1:
<div id="app">
<runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
template: '<h2>自定义组件!</h2>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
（2）局部组件child
<body>
<div id="app">
<runoob></runoob>
</div>
 
<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>
*重点（3）prop使用（prop验证）
example：
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组／对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })
注释：prop验证规则type：string，number，boolean，function，object，array
type 也可以是一个自定义构造器，使用 instanceof 检测。
12，自定义指令（directive）
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
 
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
 
 
总结
vue组件
步骤:1.创建组件component。
example：js中
//组件创建
Vue.component('todo-item',{
props:['todo'],
template: '<li> {{todo.text}} </li>'
})
2.创建HTML
<div id="app-07">
<ol>
<todo-item v-for="item in items" v-bind:todo = "item"></todo-item>
</ol>
</div>
3.js中，逻辑绑定
example：
var app7 = new Vue({
el:'#app-07',
data: {
items:[
{text:'component'},
{text:'组件使用'},
{text:'dome'},
]
}
})
posted @ 2017-11-16 10:48  T_Fengyun  阅读(122)  评论(0)  编辑  收藏  举报