vue 流行框架
从原生js---->jquery -->模板引擎----> angular/ vue.js框架
模板引擎优点：屏蔽了所有浏览器，解决了浏览器兼容性问题，同时
缺点：减少不必要的DOM操作
框架与库的区别
- 框架是一个骨架，提供一整套业务解决方案，如果要切换框架，则相当于推翻整个房子重构
- 库：一个小的共享功能
1.vue的基本结构
<!DOCTYPE html>
<html lang="en">
<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的包-->
<script src="../lib/vue.js"></script>
</head>
<body>
<!--将来new 的vue实列会控制这个元素所有内容-->
<div id="app">
<p v-cloak>{{msg}}</p>
<p v-text="msg"></p>
<!--默认v-text是没有闪烁问题-->
<!--v-text会覆盖原来元素中的原本内容，但是插值表达式不会清空内容-->
<div>{{msg2}}</div>
<div v-html='msg2'></div>
<!-- v-bine： 是vue中提供绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle"> -->
<!-- vue中提供v-on： 事件绑定 -->
<input type="button" value="按钮" :title="mytitle" @click="show">
</div>
<script>
//2.创建一个vue实列
var vm = new Vue( {
el: '#app', //表示我们 new 的vue实列控制那个试图区域
//这里的data就是mvvm中的m
data:{ //data属性放入的是el中用到的数据
msg:'hello vue!', //通过vue指令很方便把数据渲染到页面
//前端vue之类的框架，不提倡我们去手动操作dom元素
msg2: "<h1>我是h1标题</h1>",
mytitle:"这是自己定义的一个title"
},
methods: {
//这个methods属性中定义当前vue实列所有可用方法
show:function() {
alert("hello vue!");
}
}
} );
</script>
</body>
</html>
<!--1. 如何定义一个基本vue代码结构 -->
<!-- 2. 插值表达式 和 v-text -->
<!-- 3. v-cloak -->
<!-- 4. v-html -->
<!-- 5. v-bind vue提供属性绑定机制 缩写是 : -->
<!-- 6. v-on vue提供事件绑定机制 -->
2.实现一个跑马灯效果
<!DOCTYPE html>
<html lang="en">
<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库 -->
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app2">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="停止" @click="stop">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue( {
el:"#app2",
data:{
msg:"赶紧做毕设，别瞎鸡巴浪了~~~",
interval: null
},
methods:{
lang() {
if(this.interval != null) return;
console.log(this.msg);
//做跑马灯效果思路是
//1. 先拿到字符串， 再每次截取首字符串 然后添加到末尾
// var _this_ = this;
// setInterval( function () {
// var start = _this_.msg.substring(0, 1)
// var end = _this_.msg.substring(1)
// _this_.msg = end + start;
// }, 400)
//方法二、用箭头函数,, 补充自己的两个知识1.字符串处理问题 2.js中闭包问题
this.interval = setInterval( ()=> { //引用箭头函数解决指向问题 内部的this指向外部的实列
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start;
}, 400)
},
stop() {
clearInterval(this.interval) //定时器被清除了，但没有给interval赋值为空
this.interval = null
}
}
})
</script>
</body>
</html>
3.vue中一些基本事件修饰符
<!DOCTYPE html>
<html lang="en">
<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>
<script src="../lib/vue.js"></script>
<style>
.inner{
background-color: green;
height: 150px;
}
</style>
</head>
<body>
<div id="app" >
<!-- 使用stop属性阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="点击" @click.stop="btnHandler">
</div> -->
<!-- 阻止默认事件 -->
<!-- <a href="http://www.baidu.com" @click.prevent="link">有问题，去百度</a> -->
<!-- 使用.capture 捕获事件顺序 -->
<!-- .self只会阻止自己身上冒泡，并不会组织其他 -->
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
div1Handler(){
console.log("div1的触发事件")
},
btnHandler(){
console.log("btn的触发事件")
},
link() {
console.log("偶问题，百度去")
}
}
})
</script>
</body>
</html>