Vuejs基本知识(五)【视图中的渲染】

深碍√TFBOYSˉ_ 2021-06-26 16:06 403阅读 0赞

# 视图中的渲染 #

前面我们介绍了项目的运行（`hello world`), 文件夹的结构，以及`index.html`中的内容是如何一点点的渲染出来的。下面，我们来学习下`Vuejs`中对于视图的操作。

## 渲染某个变量 ##

假定我们定义了一个变量：

我们就可以这样来显示它：

<div>{
       {my_value}}</div>

完整代码如下： （ `src/components/Hello.vue`)

<template>
      <div>
        {
       {message}}
      </div>
    </template>
    
    <script> export default { data () { return { message: '你好Vue! 本消息来自于变量' } } } </script>
    
    <style> </style>

可以看到，上面的代码显示定义了 `message` 这个变量， 然后把它在 `<h1> { { message }} </h1>` 中显示出来。

打开浏览器 [http://localhost:8080/\#/say\_hi\_from\_variable][http_localhost_8080_say_hi_from_variable] , 就可以看到下图所示：  
![在这里插入图片描述][20181224230408345.png]

## 方法的声明和调用 ##

声明一个方法：　show\_my\_value

调用上面的方法

对于有参数的方法，直接传递参数就好了．　例如:

<template>
      <div>
        <input type='button' @click="say_hi('Jim')" value='...'/>
      </div>
    </template>
    <script> export default { data () { return { my_value: '默认值', } }, methods: { say_hi: function(name){ alert('hi, ' + name) }, } } </script>

上面代码中，

就会调用 `say_hi` 这个方法 , 传入参数　‘Jim’。

## 事件处理：`v-on` ##

我们看到，很多时候，　`@click` 等同于 `v-on:click`, 下面两个是一样的：

[http_localhost_8080_say_hi_from_variable]: http://localhost:8080/#/say_hi_from_variable
[20181224230408345.png]: /images/20210626/55ab14f2756f43f694e6b61a23ce86f2.png