vuejs深入浅出—基础篇
一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: 二、常用指令 v-x的使用 1.v-if/v-else 移除或插入DOM; 2.v-sh
一、从HelloWorld说起
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
{{hello}}
</div>
<script>
new Vue({
el:'#demo',data:{hello:'hello world!'}
});
</script>
二、常用指令 v-x的使用
三、模板渲染
四、计算属性 & Methods
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',data: {
message: 'Hello'
},computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
五、过滤器
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。