Vue 实例
代码示例
<div id = "app">
<h1>{
{
msg }}</h1>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
msg: "Hello Vue"
}
})
</script>
数据
在data中定义数据
使用{
{}}在视图上进行输出
{ { }} 插值表达式
又叫做 mustache 语法
在 { {}} 中可以写什么
合法的 js 表达式，注意不是js语句
代码示例
/*{
{}} 插值表达式*/
// 字符串
<h1>{
{
msg }}</h1>
// 数字
<h1>{
{
count }}</h1>
// 四则运算
<h1>{
{
a+b}}</h1>
// 逻辑运算 & || > < ===
<h1>{
{
!bol }}</h1>
<h1>{
{
a > b }}</h1>
// 三目运算
<h1>{
{
a > b ? '111' : '222'}}</h1>
// 不可以是 js 语句
<h1>{
{
if(bol){
retuen 1}}}</h1>
如何定义函数
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<h1>{
{count}}</h1>
<!-- add() rend() 函数调用也是一个表达式 -->
<div>{
{add()}}</div>
<div>{
{rend()}}</div>
</div>
<script>
let app = new Vue({
el: "",
data: {
count: 0
},
/* 自定义方法写到这个配置项里 */
methods: {
add: function () {
console.log(this)
console.log(app === this)
return this.count + 1
},
rend: function() {
return Math.random()*100
}
}
})
</script>
</body>
</html>
---控制台---
this 打印出来的是vue实例对象
true
简写
代码示例
methods: {
add () {
console.log(this)
console.log(app === this)
return this.count += 1
},
rend () {
return Math.random()*100
}
}
注意
不可以写成箭头函数形式
如果要在视图上通过插值输出，该函数要有返回值
在 Vue 2 中，需要使用 return 关键字来返回一个值，以便该值能够被模板渲染到页面上。如果在方法中没有使用 return 返回结果，页面不会自动重新渲染。
举个例子，在你的代码中，如果 add() 方法不使用 return 返回计算后的 this.count 值，页面不会反映出 count 的变化。因此，如果希望页面展示 count 的更新，可以将 add() 方法修改为：
methods: {
add() {
this.count += 1;
return this.count;
}
}
这样，在模板中调用 add() 方法时，会更新 count 的值并重新渲染页面，以显示更新后的值。
需要注意的是，Vue 2 中的方法可以返回一个值，但是返回的值通常用于其他操作，而不是直接影响页面渲染。如果你希望在方法中更新数据，并且触发页面的重新渲染，通常会使用响应式数据或计算属性来实现。例如，可以将 count 定义为响应式的数据，并在模板中使用 { { count }} 来展示它的值。这样，当 count 的值发生变化时，页面会自动更新。
