0807 创建vue实例以及vue的基础指令

lession1

1.Vue的了解

渐进式框架作者：尤雨溪 mvvm

2.创建vue实例

引入<script src="vue.js"><script>

<body>

</div>

</body>

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(""))

事件实例：

<body>

我在马路边捡到一分钱，所它交给警察叔叔手里面。

</div>

</body>

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 写成函数，每次用到就调用一次函数获得新的数据。

巴特西

0807 创建vue实例以及vue的基础指令

最新文章

热门文章