vue语法【笔记】
这里写目录标题
- 为什么要使用MVVM
-
- VUE基础语法学习
-
- 代码 demo2.html
- 案例结果：
- 代码 demo03.html
- 测试结果：
- 代码demo04
- 案例测试结果：
为什么要使用MVVM
- MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处
- 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
- View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
VUE基础语法学习
代码 demo2.html
if else 语法 【条件判断语法】
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语法if-elsetitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app1">
<p v-if="type === 1">数据就是1p>
<p v-else-if="type === 2">数据是2p>
<p v-else-if="type === 3">数据是3p>
<p v-else>没有这个数据p>
<h1 v-if="type === 1">练习1h1>
div>
<script>
<!--3.model层 数据-->
let vm = new Vue({
el: "#app1",
data: {
type: 1,
}
});
script>
body>
html>
案例结果：
代码 demo03.html
for循环获取数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app1">
<ul>
<li v-for="term in items">
<h1>{{ term.message }} 他的id为：{{ term.id }}+他的年龄为：{{ term.age }}h1>
<hr>hr>
li>
ul>
div>
<script>
<!--2. model层 数据-->
let vm = new Vue({
// 相当于映射的关系，也就是通过这个找到相对应的页面模板 [找页面模板，存放下面的数据]
el: "#app1",
//数据对象
data: {
//数组 【data里面存放数组】
items: [
//对象
{message: "leslie1测试1", id: 1, age: 18, say: "yes"},
{message: "leslie2测试2", id: 2, age: 89, say: "yes"},
]
}
})
;
script>
body>
html>
测试结果：
代码demo04
事件绑定
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app1">
<button v-on:click="HiLeslie">点击button>
<span v-bind:title="message">点击输出提示信息span>
div>
<script>
<!--2.model层 数据-->
let vm = new Vue({
el: "#app1",
data: {
message: "helloLeslie事件绑定测试" + new Date().toISOString(),
},
//添加一个方法，通过点击事件触发他
methods: {
HiLeslie: function () {
alert(this.message);
}
}
})
;
script>
body>
html>
案例测试结果：
语法主要就是这三种：
判断
循环
事件
vue的7个属性 【也就是标签的作用】===========================**
- el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
- data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
- template属性
用来设置模板，会替换页面元素，包括占位符。
- methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
- render属性
创建真正的Virtual Dom
- computed属性
用来计算
Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的
- watch属性
Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。
render属性
创建真正的Virtual Dom
- computed属性
用来计算
Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的
- watch属性
Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。
以上就是vue常用的7个属性，当然vue的属性可不知这些，开发需要的话可以在官网查阅剩余属性。