- v-clock：插值表达式的闪烁问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{
{str1}}</p>
<p v-cloak>{
{str2}}</p>
</div>
<script>
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : { //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
</script>
</body>
</html>
- v-text v-html { {var1}}
<body>
<div id="app">
<!--
在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值）
可以使用3种形式：
插值表达式{
{str}}
v-text
v-html
-->
<!-- 使用插值表达式为标签对中的内容赋值 -->
<p>==============={
{str1}}===============</p>
<p v-text="str2">=====================</p>
<p v-html="str3">=====================</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
</script>
</body>
- v-bind：绑定属性的指令 提供简写：v-bind:title --> :title
<div id="app">
<!-- 以下input标签对value属性中的值，使用vm对象，由vm对象将data中的信息动态的赋予到该value属性值当中 -->
<!--
必须使用指令属性v-bind来完成
我们需要将v-bind:加在我们需要绑定的属性的前面
-->
<input type="text" :value="str1"/>
<p :title="str2">content...</p>
<input type="button" value="submit" :title="str3+'Hello World'"/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
</script>
- v-on
v-on:click="fun1"的形式来绑定事件
相当于原生 js 中的 onclick
v-on–>@
<body>
<div id="app">
<input type="text" :value="str1"/>
<input type="button" value="点击1" v-on:click="fun1"/>
<input type="button" value="点击2" onclick="fun12()"/>
<input type="button" value="点击3" @click="fun2"/>
</div>
<script>
function fun12(){
alert("abc1");
}
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("abc2");
},
fun2(){
alert("aaaaaa");
}
}
});
</script>
</body>
- .stop 阻止冒泡：内层事件只触发一次，不向外扩散
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:red" @click="fun1">
<div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">
</div>
</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
});
</script>
</body>
- .prevent 阻止超链接默认的行为
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击1</a>
<a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
});
</script>
</body>
- .capture 捕获触发事件的机制，触发由外至内
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:red" @click.capture="fun1">
<div style="width:100px;height:100px;background-color:blue" @click="fun2">
</div>
</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
});
</script>
</body>
- .self 当前元素冒泡停止，但是事件冒泡向外扩散
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:red" @click="fun1">
<div style="width:100px;height:100px;background-color:blue" @click.self="fun2">
<input type="button" value="点击" @click="fun3"/>
</div>
</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
},
fun3(){
alert("点击按钮");
}
}
});
</script>
</body>
- v-model 数据双向绑定
<div id="app">
<h3>{
{str1}}</h3>
<input type="text" v-model:value="str1"/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
},
fun3(){
alert("点击按钮");
}
}
});
</script>
</body>
实现计算器功能：
<body>
<div id="app">
<input type="text" v-model="num1"/>
<select v-model="csign">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2"/>
<input type="button" value="=" @click="count"/>
<input type="text" v-model="result"/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
num1 : 0,
num2 : 0,
csign : "+",
result : 0
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
count(){
if(this.csign=="+"){
//直接取得的数值暂时是不能够直接计算的，默认的情况会按照字符串拼接的形式来触发+符号
//默认拼接字符串： 1+1=11
//在做数学计算之前，需要将数值格式化，才能够计算，使用parseInt方法做数值格式化的操作
this.result = parseInt(this.num1)+parseInt(this.num2);
}else if(this.csign=="-"){
this.result = parseInt(this.num1)-parseInt(this.num2);
}else if(this.csign=="*"){
this.result = parseInt(this.num1)*parseInt(this.num2);
}else if(this.csign=="/"){
this.result = parseInt(this.num1)/parseInt(this.num2);
}
}
}
});
</script>
</body>
- v-for 遍历数据
<body>
<div id="app">
<!-- 直接使用插值表达式 引用数组 通过下标展现所需元素 -->
<!-- <p>{
{cityList[0]}}</p>
<p>{
{cityList[1]}}</p>
<p>{
{cityList[2]}}</p>
<p>{
{cityList[3]}}</p>
<p>{
{cityList[4]}}</p> -->
<!--
使用v-for指令的形式遍历字符串数组
语法：元素 in 数组
-->
<!-- <p v-for="city in cityList">
{
{city}}
</p> -->
<!-- 在以上需求的基础上 遍历出所有的元素以及对应的下标 -->
<p v-for="(city,i) in cityList">
{
{i}}--------------{
{city}}
</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
cityList : ["北京","上海","广州","深圳","沈阳"]
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
</script>
</body>
<body>
<div id="app">
<!-- 每一次遍历出来的元素，代表一个城市信息对象 -->
<p v-for="(city,i) in cityList" :key="city.id">
<!-- 对象以 .属性名 的形式来取得属性值 -->
{
{i}}------------------{
{city.id}}-----------{
{city.name}}
</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
cityList : [
{id:"A0001",name:"北京"},
{id:"A0002",name:"上海"},
{id:"A0003",name:"广州"},
{id:"A0004",name:"深圳"},
{id:"A0005",name:"沈阳"},
]
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
</script>
</body>