vue
- 1.认识M V VM结构
- 2.我的第一个Vue实例
- 3.闪烁问题
- 4.三种赋值方式
- 5.绑定属性v-bind:可以简写为：
- 6.v-on:click("函数名字")触发事件可以简化@click("函数名字")
- 7.事件修饰符的使用
- 8.pavent禁用herf
- 9.执行冒泡相反的事件
- 10.阻止自己的触发
- 11.阻止冒泡事件（stop）
- 12.只触发一次once
1.认识M V VM结构
2.我的第一个Vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="app">{{param1}}</p>
</body>
<script type="text/javascript">//这个前面申明了，就是vue格式
var app = new Vue({
el: '#app',//定位要操作的元素
data: {
param1: 'Hello Vue!'//数据内容
}
})
</script>
</html>
3.闪烁问题
(1) v-cloak.
使用v-cloak主要为了解决插值表达式的闪烁问题.
使用插值表达式的问题:.
在页面加载的过程中,在页面中的{}}插值表达式首先会被页
面认可为是html元素中的实在存在的内容。所以浏览器会首先将({}}
展现在页面上,页面加载完毕后,插值表达式{}才会真正的转变为
动态赋予的值。这就会造成-种现象,如果将来终端在访问服务器的
过程中,网速较慢(网络比较卡),那么我们的({}}会首先展现出来，
{}展现出来之后,会一闪而过,最终显示的是最终被赋予的值。这
就是前端开发中所谓的,插值表达式的闪烁问题。
第一步：在头文件加入
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
第二步：绑定
4.三种赋值方式
5.绑定属性v-bind:可以简写为：
6.v-on:click(“函数名字”)触发事件可以简化@click(“函数名字”)
//methods :表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
7.事件修饰符的使用
8.pavent禁用herf
9.执行冒泡相反的事件
10.阻止自己的触发
11.阻止冒泡事件（stop）
12.只触发一次once
