Vue之day01 vue简单使用 node js语言 插值 文本指令 事件指令 属性指令
目录标题
-
-
- 一：Vue介绍
- 二：vue的简单使用
- 三：node js语言
- 四：插值
- 五：文本指令
-
-
- 1.方法
-
- 六：事件指令
- 七：属性指令
-
一：Vue介绍
1.vue是一个js框架，类似于jQuery
2.版本：2.x, 3.x
3.M-V-VM思想
-
M model 数据层 相当于js的变量
-
V view 页面展示 html+css的页面
-
VM vue写的 介于m和v之间的一层
双向数据绑定：只要改了M层的数据（js变量），view层页面跟着变化
二：vue的简单使用
1.下载和引用地址
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
2.基本语法
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<p>名字{{name}}p>
<p>年龄{{age}}p>
div>
body>
<script>
// vm对象，管理了html中的div, 在div中写vue的模板语法
var vm = new Vue({
el:'.app',
data:{
name: 'xie',
age: 18
},
})
script>
- 由于是对象，可以通过点的方式得到数据，也可以通过点的方式给变量直接赋值，直接动态展示到前端页面上
vm._data.age
18
vm._data.name='赵美丽';
'赵美丽'
三：node js语言
1.node js 是后端语言，即JavaScript的操作系统版的解释器
1.谷歌浏览器的v8引擎（js解释器）抠出来，能够运行在操作系统之上，并且加上了c语言写的底层库，形成了node js
四：插值
可以插入的数据类型：字符串，数字，数组，对象，简单的js语法，标签(不会被渲染)
<body>
<div id="app">
{{name}}
<p>{{list1[1]}}</p>
<p>{{obj1.name}}</p>
<p>{{obj1['age']}}</p>
<p>{{link1}}</p>
<p>三目运算符:{{score>60?'优秀':'不及格'}}</p>
<p>{{10+10}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'xie',
list1: [1,2,3,4],
obj1: {name: 'zhao', age: 18},
link1: '百度',
score: 99,
},
})
</script>
五：文本指令
1.方法
- v-text: 把字符串原封不动的显示在标签上
<div v-text="link1"></div>
link1: '百度',
- v-html: 把标签字符串渲染后，显示在标签里
<p v-html="link1"></p>
link1: '百度',
- v-show：显示与不显示 style=“display: none;”
<img v-show="show" src="./js/666.jpg" alt="" height="100px" width="100px">
show: true,
- v-if: 显示与不显示 标签直接被删除
<img v-if='show1' src="./js/1.webp" alt="" height="100px" width="100px">
show1: true,
六：事件指令
1.基本语法
<button v-on:click="handleClick">点我button>
<br>
<img v-show="show" src="./js/1.webp" alt="" height="100px" width="100px">
methods: {
handleClick() {
this.show=!this.show
},
}
2.简化语法
<button @click="handleClick1">美女button>
handleClick1() {
alert('美女')
},
3.传参数
<button @click="handleClick2('赵美丽')">传参数button>
handleClick2(arg) {
alert(arg)
},
4.传事件
<button @click="handleClick2($event)">传事件button>
总结：
正常写法：v-on:click='函数名'
简写：@click='函数名'
七：属性指令
- 使用变量动态的替换属性
v-bind: 属性名='属性值'
<p v-bind:id='变量'>p>
# 简写
:属性名='属性值'
<body>
<div class="app">
<button @click="handleClick">点击换图片</button>
<br>
<img v-bind:src="url" alt="" height="300px" width="300px">
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
url: 'js/1.webp',
},
methods: {
handleClick(){
this.url='js/666.jpg'
}
}
})
</script>