小谷子课堂笔记之Vue.
Vue.js 渐进式JavaScript，声明式渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">//更容器
<h1>{{ text }},</h1>
<p>{{ message }}。</p>
<a v-bind:href="href" v-bind:title="title">{{ happy }}</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
text: "大家好",
message:"我叫谷娜娜",
happy:"你好我叫vue",
title:"这是vue的官网",
href:"https://cn.vuejs.org/v2/guide/"
}
});
</script>
</body>
</html>
- el:element 需要获取的元素，一定是html中的跟容器；
- data：用于数据的存储；
- v-bind为指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app1">
<p v-if="seen">自己选择的路，要坚持下去。</p>
<p v-else-if=""></p>
<p v-else=""></p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app1 = new Vue({
el:".app1",
data:{
seen:false
}
});
</script>
</body>
</html>
- v-if\v-else-if\x-else开头，中间，结尾三种判断，在Html中间不能有别的代码。
在判断语句消失的东西是不占位的，而v-show转换成了display:none.
<div class="app2">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
var app2 = new Vue({
el:".app2",
data:{
todos:[
{text:"学习Javascript"},
{text:"学习Jquery"},
{text:"学习Vue"}
]
}
});
</script>
- v-for循环, A in B,可以替换成A of B.
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app" v-on:click="fun">
<button>{{ btn }}</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
btn:"加载"
}，
methods:{
fun:functiom(){
this.btn = "加载中"
}
})
</script>
- v-on指令监听DOM事件，并触发时运行一些Javascript事件。
<div id="app3">
<button v-on:click="say(yes)">Y</button>
<button v-on:click="say('no')">N</button><p>
<button v-0n:click="worm('你叫什么名字?',$event)">what</button>
<script>
var app3 = new Vue({
el:'#app3',
data:{
yes:"1"
},
methods:{
say:function(s){
alert(s);
},
worm:function (what,event){
if(event) event.preventDefault();
alert(what)
}
}
});
</script>
</div>
- 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法;
冒泡和事件默认事件：
（1）.event.stopPropagation()方法：
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行， 当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
（2）.event.preventDefault()方法：
这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
（3）.return false ：
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。
网友评论