翻转世界
目标 点击按钮-把文字取反显示-再点击取反显示(回来)
提示: 把字符串取反赋予回去
- 1 按钮添加点击事件
- 2 new 出 Vue实例对象 data传入数据
- 3 this 点击后进行 拆分字符串 reverse 函数反转 join 拼接
拓展:
1 const的基本概念
cosnt名叫常量限定符，用来限定特定变量，
以通知编译器该变量是不可修改的，习惯性
的使用const，可以避免在函数中对某些不
应修改的变量造成可能的改动
一 const 修饰 整型 变量
我们知道，const是一个关键词，在编译的时候起效果，它所修饰的常变量是c语言常量中的一种
例如:
int main()
{
const int num = 10;
num = 20;
printf("%d\n",num)
return 0;
}
这段代码会产生编译错误，因为在第三行的代码中，尝试将一个const变量
num的值修改为20，但是const变量的值不能被更改。因此，编译器会报错，
并且不会生成可执行文件。如果想要让num的值可以被修改，需要将它声明为
非const类型的变量。修正后的代码如下：
int main() {
int num = 10;
num = 20;
printf("%d\n", num);
return 0;
}
这样就可以正确地输出20了。
methods的解释:
在methods中定义方法
我们可以使用methods属性给Vue定义方法，列如methods的基本语法
1示例
var vm = new Vue（{
methods:{
方法名:fuction(){}
}
}
2 示例
列如在 methods 中定义一个名为 show的方法
methods:{
show:fuction(){
console.log("显示内容")
}
}
方法中访问属性
methods 方法中访问 data的数据，可以通过直接通过 this.属性名的形式来访问
示例
列如我们在show方法中，访问 number 属性，可以直接通过 this.number 形式访问
其中this 表示的就是 Vue实例对象
列如:
new Vue实例对象({
el:"#app",
data(){
return{
number:100
}
},
methods:{
show:fuction(){
console.log(this.number)
}
}
})
一个小实例
下面是一个用于修改用户名的简单实现，在button按钮绑定了一个change方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛([9xkd.com](http://9xkd.com/))</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>点击按钮修改姓名</h1>
<div id="app">
<p>{{message}}</p>
<button @click="change">点我改名</button>
</div>
<script>
var app = new Vue({
el:"#app",
data(){
return{
message:"小飞侠"
}
},
methods:{
change(){
this.message = "水星仔" // 改变data中属性的值
}
}
})
el的解释:
在Vue.js中，"el"是一个选项，用于指定Vue实例要挂载的元素。它接受一个CSS选择器字符串
作为值，并将Vue实例与文档中匹配的第一个匹配元素相关联。这意味着，通过在 "el" 选项中
指定一个元素，可以将Vue实例绑定到该元素上，并在该元素内部管理应用程序状态和渲染逻辑。
~~ ~~
例如，如果我们将 "el" 选项设置为 "#app"，则Vue实例将会自动搜索页面中id为 "app"
的元素，并将其与Vue实例进行关联。这样，我们就可以使用Vue的模板语法和组件系统来构
建交互式UI，同时也可以通过Vue实例中的数据和方法来管理和更新UI。
代码如下:
