目录
4、.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
一、Vue的概念
1.什么是vue.js
1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
2、Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
二、MVC与MVVM的区别
1、MVC 是后端的分层开发概念;
2、MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model、View、VM ViewModel;
三、Vue.js的代码结构
1、引入vue.js
2、写视图层,我们要展示的内容
3、实例化Vue()
(1)data:存放数据
(2)el:这个控制是哪块视图
(3)methods:放我们的方法
-
图下示例:
引入js
<script src="../vue-2.4.0.js"></script>
<body>
<!-- b) 写视图层,我们要展示的内容 -->
<div id="app">
展示区域
<!-- 插值表达式 {
{}} -->
{
{msg}}
{
{num * 2 + 3}}
</div>
<div id="app2">
{
{num}}
</div>
</body>
</html>
<script>
var app = new Vue(
{
//控制区域
el:"#app",
//数据
data:{
msg:"hello word22!",
num:100
},
methods: {
},
}
)
var app2 = new Vue(
{
//控制区域
el:"#app2",
//数据
data:{
msg:"hello word!",
num:100
},
methods: {
},
}
)
</script>
注意:都是通过this对象去拿的,通过this也可以调用方法。写方法的时候需要注意this的指向问题。
四、插值表达式、v-cloak、v-text、v-html
1、如何获取变量值呢?
(1)插值表达式{ {}},可以在前后插入一些内容
(2)v-text:会替换掉元素里的内容
(3)v-html:可以渲染html界面
-
示例:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue-2.4.0.js"></script> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <div v-cloak> { {msg}}</div> <div>{ {text}}</div> <div>{ {html}}</div> <!-- v-html 能够解析副文本 v-text会覆盖原来的内容 --> <div v-html="html">12456789</div> <div v-tetx="html"></div>