首页 > 编程语言 >11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】

时间:2023-02-26 15:06:47浏览次数:53  
标签:11 03 Vue el app var new message


1. 什么是MVVM

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_Vue

2. 为什么要使用MVVM

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_vue.js_02

3. MVVM的组成部分

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_Vue_03


11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_.net_04


11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_vue.js_05

4. Vue

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_vue.js_06


Vue的核心就是实现了DOM监听与数据绑定

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_.net_07

5. 第一个Vue程序

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_Vue_08

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_.net_09


开发版本

  • 包含完整的警告和调试模式:https://vuejs.org/js/vue.js
  • 删除了警告,30.96KB min + gzip:https://vuejs.org/js/vue.min.js

在线CDN导入:

  • ​<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>​​【完整版】
  • ​<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>​​【压缩版】

第一个Vue程序的流程:

1、创建一个 HTML 文件
2、页面中导入Vue.js【习惯导入到最下面】
​​​EL表达式​​​​是一种在JSP页面获取数据的简单方式(只能获取数据,不能设置数据)​3、创建一个 Vue 的实例

<script type="text/javascript">
var vm = new Vue({
<!--1.绑定标签:EL表达式通过id选择器把app选中-->
el: "#app",
<!--2.数据绑定-->
data: {
message: "hello, vue!"
}
});
</script>

4、将数据绑定到页面元素
​​​{{}}​​​​说明:只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来,即可实现数据绑定功能,也就实现了 ViewModel 层所需的效果,是不是和 EL 表达式非常像?​​ 完整的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>

<!--view层 变成了模板-->
<div id="app">
<!--拿数据-->
{{message}}
</div>


<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
<!--1.绑定标签:EL表达式通过id选择器把app选中-->
el: "#app",
<!--2.数据绑定-->
data: {
message: "hello, vue!"
}
});
</script>

</body>
</html>

6. v-bind

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_vue.js_10


体验代码:

<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_html_11

7. v-if,v-else

11_03_第六阶段:大前端进阶||07-Vue详解||P4:第一个Vue程序 && P5:Vue基本语法【观看狂神随笔】_vue.js_12


例子1

<div id="app">
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>

</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

//viewModel 实现与Model双向绑定,动态更新视图
var vm = new Vue({
el:"#app",
// model :数据
data:{
ok: true
}
});
</script>

例子2

<div id="app">
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>D</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
type: 'A'
/*message: "hello, world"*/
}
});
</script>

=== 的含义:如果两个值的类型不同,直接返回false。

8. v-for

<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
  • 注:items 是数组,item是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '#app',
data: {
items: [
{"message": "韦恩公司1"},
{"message": "韦恩公司2"}
]
}
})
</script>
</body>
</html>

9. v-html

v-html:将字符串转换成html标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
<p>{{message}}</p>
<p>{{msg}}</p>

<!-- 将一个文本字符串转化为HTML标签的形式 -->
<p v-html="msg"></p>
</div>

<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: "<h1>这是一个h1元素内容</h1>",
message: "hello"
}
});
</script>
</body>
</html>


标签:11,03,Vue,el,app,var,new,message
From: https://blog.51cto.com/u_15980166/6086597

相关文章