代码拉取完成,页面将自动刷新
前面我们介绍了项目的运行(hello world), 文件夹的结构,以及index.html中的内容是如何一点点的渲染出来的。下面,我们来 学习下Vuejs中对于视图的操作。
假定我们定义了一个变量:
<script>
export default {
data () {
return {
my_value: '默认值',
}
},
}
</script>
我们就可以这样来显示它:
<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 , 就可以看到下图所示:
声明一个方法: show_my_value
<script>
export default {
data () {
return {
my_value: '默认值',
}
},
methods: {
show_my_value: function(){
// 注意下面的 this.my_value, 要用到this这个关键字.
alert('my_value: ' + this.my_value);
},
}
}
</script>
调用上面的方法
<template>
<div>
<input type='button' @click="show_my_value()" value='...'/>
</div>
</template>
对于有参数的方法,直接传递参数就好了. 例如:
<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>
上面代码中,
<input type='button' @click="say_hi('Jim')" value='...'/>
就会调用 say_hi
这个方法 , 传入参数 'Jim'。
我们看到,很多时候, @click
等同于 v-on:click
, 下面两个是一样的:
<input type='button' @click="say_hi('Jim')" value='...'/>
<input type='button' v-on:click="say_hi('Jim')" value='...'/>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。