<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1. 导入Vue包 下载地址：https://files.cnblogs.com/files/cgy-home/vue.min.js-->
<script src="../lib/vue.min.js"></script>
</head>
<body>
<!--2. 创建一个要控制的区域-->
<div id="app">
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
},
methods: {
}
})
</script>
</body>
</html>
<!--1. 如何定义一个基本的Vue代码结构-->
<!--2. 插值表达式 和 v-text -->
<!--3. v-cloak -->
<!--4. v-html -->
<!--5. v-bind Vue提供的属性绑定机制 缩写 ：-->
<!--6. v-on Vue提供的事件绑定事件 缩写 @-->
<!--7. v-cloak 解决插值表达式闪烁的问题-->
<!--8. v-text 覆盖标签内部内容-->
<!--9. v-html 解析html标签-->
<!--10. 使用 .stop 阻止冒泡-->
<!--11. 使用 .prevent 阻止默认行为-->
<!--12. 使用 .capture 实现捕获触发事件的机制-->
<!--13. 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数-->
<!--14. 使用 .once 只触发一次事件处理函数-->
<!--15. .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为， .stop则是阻止所有冒泡行为-->
<!--16. v-model 实现数据双向绑定-->
<!--17. :class="classObj"-->
<!--18. :style="[styleObj,styleObj2]"-->
<!--19. v-for="(item,i) in list" 循环普通数组-->
<!--20. v-for="(user,i) in list" 循环对象数组-->
<!--21. v-for="(val, key,i) in user" 循环对象-->
<!--22. v-for="count in 10" 迭代数字-->
<!--23. v-for="item in list" :key="item.id" 对象的使用-->
<!--24. v-if="flag" 和 v-show="flag" 的使用-->
总结
<!--1. MVC 和 MVVM 的区别 -->
<!--2. Vue中最基本代码的结构-->
<!--3. 插值表达式 v-cloak v-text v-html v-bind v-on(缩写是@) v-model v-for v-if v-show-->
<!--4. 事件修饰符： .stop .prevent .capture .self .once-->
<!--5. el 指定要控制的区域 data是个对象，制定了控制区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义方法-->
<!--6. 在VM实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this-->
<!--7. 在 v-for 要会使用 key 属性 （只接受 String / number）-->
<!--8. v-model 只能应用于表单元素-->
<!--9. 在Vue中绑定样式两种方式 v-bind:class v-bind:style-->
例子：跑马灯
<body>
<!--2. 创建一个要控制的区域-->
<div id="app">
<input type="button" value="浪起来" @click="lang()">
<input type="button" value="低调" @click="stop()">
<h4>{{msg}}</h4>
</div>
<script>
// 注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用methods中的方法，必须通过
// this.数据属性名 或this.方法名 来进行访问，这里的tihs，就表示我们new出来的 vm 实例对象
// 注意： vm实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步收到
var vm = new Vue({
el: ‘#app‘,
data: {
msg: ‘猥琐发育，别浪---！‘,
intervalId: null
},
methods:{
lang:function () {
if (this.intervalId != null) {
return;
}
this.intervalId = setInterval(()=>{
var start = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + start;
}, 400)
},
stop:function () {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
</body>
例子：简易计算器
<body>
<!--2. 创建一个要控制的区域-->
<div id="app">
<input type="text" v-model="n1">
<select vaule="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="cal">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
n1:0,
n2:0,
result:0,
opt: "+"
},
methods: {
cal(){
/*switch (this.opt) {
case "+":
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case "-":
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case "*":
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case "/":
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}*/
var str = "parseInt(this.n1) " + this.opt + " parseInt(this.n2)"
this.result = eval(str);
}
}
})
</script>
</body>
原文地址：https://www.cnblogs.com/cgy-home/p/11320985.html
时间： 2024-11-06 02:10:18