0807 创建vue实例以及vue的基础指令
lession1
1.Vue的了解
渐进式框架 作者：尤雨溪 mvvm
2.创建vue实例
引入<script src="vue.js"><script>
<body>
<div id="myApp">
</div>
</body>
<script>
new Vue({
el:"#myApp",// 挂载
data:{// 是你的数据状态。
str:""
}
})
</script>
3.基础指令 directive
vue对元素属性的扩展 以v-开头
v-model 可以将你的表单元素 与 你的数据进行绑定
修饰符： 该指令的属性
number： 将所绑定的元素的值设定为 number
trim： 去除空格
lazy：当失去焦点的时候，才会与你的数据产生响应
v-if 值是一个布尔，用于是否渲染
v-else-if v-else v-if
v-for 遍历数据( 字符串，数字，对象，数组)
v-bind 将你的数据与你的元素属性进行绑定 简写 ：
v-show 用于隐藏或显示
v-on 绑定事件 简写
v-once 用于初始值
v-pre 跳过该区域
{{}}:输出数据，写表达式。
附：js的一种取反操作：
const str = "*";
console.log(str.split("").reverse().join(""))
事件实例：
<script src="vue.js"><script>
<body>
<div id="myApp">
<!--方法后面的括号 要不要加 ，可以加-->
<input type="button" v-on:click="changeIsShow" value="显示与隐藏">
<input type="button" @click="changeIsShow" value="@显示与隐藏">
<div v-show="isShow">
我在马路边捡到一分钱，所它交给警察叔叔手里面。
</div>
</div>
</body>
<script>
new Vue({
el:"#myApp",
// 存放你的状态。
data:{
isShow:true
},
// 将你的函数方法写在这里
methods:{
// 方法
changeIsShow(){
this.isShow = !this.isShow;
// console.log(this.isShow);
}
}
})
</script>
重点面试相关问题：
1.mvvm和mvc的区别
mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。
2.vue中为什么自定义组件data定义成一个函数？
主要是防止组件与组件之间，声明的变量互相影响，他们是互相独立的，互补干扰
组件复用时所有组件实例都会共享 data，如果 data 是对象的话，就会造成一个组件修改 data 以后会影响到其他所有组件，所以需要将 data 写成函数，每次用到就调用一次函数获得新的数据。