1、vue.js初始
a. 含义:构建用户界面的渐进式框架,采用自底向上逐层应用。
b. 核心理念:数据驱动视图,组件化开发。
2、框架和库的区别
a. 框架:是一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目
b. 库:提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求
3、MVC和MVVM的区别
a. MVC是后端分层开的概念,MVVM是前段视图层的概念。
b. 在MVC中,V代表view视图层,作用发送数据、展示数据。C代表controller调度层,作用响应数据,返回数据。M代表model模型层,作用处理数据,与数据库打交道。
c. 在MVVM中,V代表view视图层,作用展示数据。VM代表view-model视图模型层,作用连接视图层和模型层,承上启下的作用。M代表medel模型层作用逻辑处理
4、vue.js的代码结构
<!-- 1、引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<!-- 2、书写视图层 -->
<div id="app">
<div>
<!-- 插值表达式:将数据渲染到页面上,做简单运算 -->
{{msg}}==={{age+2}}
</div>
<!--
v-text v-html
相同点:都会替换标签内原有的内容
不同点:v-html会解析富文本,v-text不会
-->
<div v-text="html"></div>
<div v-html="html"></div>
</div>
</body>
<script>
// 3、创建vue实例
let vm = new Vue({
//控制区域
el: "#app",
//存放数据
data: {
msg: "今天学vue",
age:18,
html:'<a href="http://www.baidu.com">百度一下</a>'
},
//存放方法
methods: { }
})
</script>
5、元素绑定和事件
a. 属性绑定:v-bind 简写成 ':'
<body>
<div id="app">
<!-- 元素的属性绑定 v-bind -->
<img v-bind:src="src" alt="">
<!-- 简写 -->
<img :src="src" alt="">
</div>
</body>
b. 事件绑定:v-on 简写 '@'
<body>
<div id="app">
<!-- 事件的绑定 v-on -->
<button v-on:click="Img">按钮</button>
<!-- 简写 -->
<button @click="log">点击</button>
</div>
</body>
6、事件修饰符
a. .stop 阻止冒泡:阻止时间继续向外传播
<div @click.stop=""></div>
b. .capture 添加事件捕获
<div @click.capture=""></div>
c. .self 事件在该元素本身触发时触发回调
<div @click.self=""></div>
d. .once 事件只会触发一次
<div @click.once=""></div>
e. .prevent 阻止默认事件
<div @click.prevent=""></div>
7、数据双向绑定
a. 双向绑定 v-model 绑定的是表单控件
<!-- 双向绑定 v-model 绑定的是表单控件 -->
<input type="text" v-model:value="">
<!-- 简写 -->
<input type="text" v-model="">