Vue的模板语法和插入表达式以及ref的响应和数据变量

1.Vue3的模板语法和插入表达式

1.Vue3的模板语法

我们先创建一个Vue3的项目然后给我们的这个项目创建一个view组件来确定我们执行的页面是我们正在编写的项目。

在我们在平时的页面中无法给我吗直接表示出我们的计算比如2+3页面会直接显示2+3而不是它计算的结果，如果需要直接显示我们的计算结果的话可以适用{{ msg }}来实现我们的计算结果

可以看我们没使用{{}}的无法直接显示计算结果而使用{{}}可以直接出计算结果，{{}}就相当于我们在js中进行了计算然后将结果返回到我们的页面上。

我们其实也是可以在script标签内部创建一个const的变量，比如创建一个变量名为 a 的变量然后在上面中调用我们定义的变量a

可以明显看的我们两a的区别，没有使用{{}}的a就是单纯的a，而我们使用了{{}}括起来的a却是我们下面设置的变量内容也就是所我可以使用{{}} 来实现调用我们在下面script设置的变量，如果你没有效果的话或者说下面那个a显示的是空就是没有任何东西，应该是你没有给script设置setup属性

在我们官网会有这个模板语法的一些详细信息

链接：简介 | Vue.js (vuejs.org)

2.插入表达式

我们不仅可以设置变量和计算也可以设置我们的一下关键字比如设置当前时间Date.now()、随机数Math.random()等。

我还可以在设置一些判断等，当然我们不可能将我们所有的操作和计算返回值都只在template组件里面完成，我们也可以在script里面创建一个方法，创建一个方法使用我们的function来创建，用以下语法，你可以选择不传入值，也可以选择不返回，这个根据你的需求来即可

function 方法名(你要传入的值){

return “你要返回的值”

}

所以我们在调用方法的时候不仅仅需要{{}}来括起来，还要有一个()才能只拿到我们需要的返回值。

2.ref的响应和数据变量

1.ref的响应

我们在style标签中定义了一个num的变量并且想将它显示到我们的页面上时可以用{{}}，但是我们又想然让它有一个变化，比如说逐步添加，就是我们给它赋予了一个值为1然后想让他每一秒加一，这个时候我们需要用到我们的定时器。

我们只有控制台会输出我们的改变的值，而页面却没有任何的改变，这个时候可以使用我们的ref，在使用之前需要定义我们的ref然后使用。

如果所我们并没有使用我们的value的话就会这样

所以我们如果需要使用ref并且要修改或者输出它的值一定要用value。

2.数据变量

我的ref使用不仅仅可以定义我们的数字也可以定义字符、数字、对象等等

我们需要数组的某一个确地值时，可以使用下标，如果是对象的话可以使用属性名，也可以使用属性名对这个属性进行修改

这个就是我们的ref响应和数据变量了。