美文网首页
Vue自学笔记(1)引入vue.js步骤

Vue自学笔记(1)引入vue.js步骤

作者: 王帅1998 | 来源:发表于2020-10-22 09:07 被阅读0次

引入 Vue:引入开发环境版本有自带的提示和警告适合新手

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

差值表达式{{}}; (也可称模板语法)

<!--HTML部分-->
<div id="app">
  {{ message }}
</div>
<!--JS部分-->
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

输出 Hello Vue!
'#':id选择器
'.':class选择器

步骤:

1.导入开发版本的vue.js
2.创建vue实例对象,设置el属性和data属性;vue用到的数据定义在data中,data中可以写复杂类型的数据
3.使用简洁的模板语法把数据渲染到页面上,渲染复杂类型数据时,遵守JS的语法即可

相关文章

网友评论

      本文标题:Vue自学笔记(1)引入vue.js步骤

      本文链接:https://www.haomeiwen.com/subject/tecumktx.html