vue入门基础及指令

最新推荐文章于 2022-12-03 15:58:16 发布

bubble_1

最新推荐文章于 2022-12-03 15:58:16 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/bubble_1/article/details/97290062

版权

vue是一个渐进式的javascript框架：渐进式（越学越难）

vue是一个单项数据流的框架

所以new调用
var vue=new Vue(options对象)

options中写哪些东西？
只要vue官网api中挂有‘选项’字眼的都可以放在options里面

el：
1.为下方代码块vm规定一个使用范围，也就是说只能在下面#app的div内使用
2.为实例vm提供一个模板
data：
1.规定了一个数据
2.data的数据使用方位必须在#app的div内

<div id="app"></div>//这个是假的DOM   只是一个模板
var vm=new Vue({
el:'#app',
data:{
    msg:'Hell  Vue.js'
}
})

Vue中为了能够让我们在模板中使用js语法，它提供了一个语法糖，这个语法糖叫做mustache，别名：双大括号语法

<div id="app">
{{ this.msg }}//这个this 指的是下面new出来的vm  输出：Hell  Vue.js
</div>
var vm=new Vue({
el:'#app',
data:{
    msg:'Hell  Vue.js'
}
})

data中定义的数据在模板中相当于全局变量，可以直接调用

<div id="app">
<p>{{ msg }}</p>//简写：可以直接用 相当于全局变量可以直接调用
</div>
var vm=new Vue({
el:'#app',
data:{
    msg:'Hell  Vue.js'
}
})

划分MVVM
我们把下面的vm作为根实例（根组件）
数据改变视图也会跟着改变，注意页面不会刷新

<div id="app">
<p>{{ msg }}</p>
</div>
var vm=new Vue({//VM  视图的模型
el:'#app',//V  视图
data:{//M 模型
    msg:'Hell  Vue.js'
}
})

vue的行数：11945（开发环境）
vue的源代码是通过匿名函数来进行封装的
匿名函数的好处：
1.解决了命名冲突
2.规定了一个独立的作用域
3.安全性要高

关注