Vue的基本语法
1.前置准备
在vue页面的 script 标签中写入
export default {
name: 'Test1',
data () {
return {
key: '测试1--OK',
ins: "
welcome
",num1: 20,
colorShow:'blue',
times: '2023-06-01 23:23:23',
msg: 'welcome to china'
}
}
}
在 vue页面的 style 标签中写入
.red{
background-color: red;
}
.blue{
background-color: blue;
}
在vue页面的 template 标签中写入
2.插值运算符 {{ }}
vue 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
比如 ：在 class='main' 的 div 中 加入
{{ key }}
{{ ins }}
表示把 data 中的 key 和 ins 数据绑定到页面上。
结果如下：
注意：{{ }} 并不会考虑 html 的语法的效果 只是显示纯文本。
3. v-html 会显示 html语法对应的效果
比如：在 class='main' 的 div 中 加入
结果如下：
4. 双向绑定： v-model
修饰符.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：也就是敲 enter 键才触发改变
比如：在 class='main' 的 div 中 加入
请输入:
可以让 data 中的msg 属性随着 文本的输入 改变而改变
5.v-bind用于绑定属性和数据
v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id == :id
比如：在 class='main' 的 div 中 加入
数字
表示显示 蓝色的数字 ，因为 :class="colorShow" 表示 class='blue'
6. v-on 用于绑定触发事件
完整事件处理语法
缩写
比如：在 class='main' 的 div 中 加入
在 script 标签中加入：
methods: {
changeBg(){
if( this.colorShow == 'blue'){
this.colorShow = 'red';
}else{
this.colorShow = 'blue';
}
}
}
表示：添加一个按钮 ‘改变背景’，绑定1个鼠标单击事件，点一下变红再点一下变蓝。