10,612
社区成员
发帖
与我相关
我的任务
分享Vue入门第一课 挂载点、模板与实例，实现单击文字切换功能（零基础入门版）
为了冲进前端的大门，小编踏上了学习Vue.js的不归路，从今天起就开始和大家分享学习之路啦。
基础知识的话HTML5、JavaScript肯定必不可少，当然，小编实名羡慕java好的小伙伴，我真的是跌在java上千千万万遍。好了，进入正题，我就直接上干货啦。
首先是工具：pc机+Hbuilder就可以啦。(当然其他编译软件也行)
前期准备：Vue下载在Vue.js官方网站http://cn.vuejs.org/点击学习->教程->找到安装（绿色）->开发版本,下载到自己想要存放的位置。
正式开始：打开Hbuilder->单击文件->新建项目->(自行命名)创建。将刚刚下载的Vue.js复制（Ctr+C）单击你创建的项目粘贴上去（Ctr+v）。刚建的项目右键->新建（new）->html文件->创建。
第一次分享不太聪明的亚子，大家将就着看吧，都要多练多实践呀，今天也Vue宠（虐）爱（我）的一天！
基础知识的话HTML5、JavaScript肯定必不可少，当然，小编实名羡慕java好的小伙伴，我真的是跌在java上千千万万遍。好了，进入正题，我就直接上干货啦。
首先是工具：pc机+Hbuilder就可以啦。(当然其他编译软件也行)
前期准备：Vue下载在Vue.js官方网站http://cn.vuejs.org/点击学习->教程->找到安装（绿色）->开发版本,下载到自己想要存放的位置。
正式开始：打开Hbuilder->单击文件->新建项目->(自行命名)创建。将刚刚下载的Vue.js复制（Ctr+C）单击你创建的项目粘贴上去（Ctr+v）。刚建的项目右键->新建（new）->html文件->创建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root"><!--挂载点间内容为模板-->
<div v-on:click="handleClick">{{content}}</div> <!--"v-on:"可简写为@>
<!--
{{msg}} <!--div为挂载点
<h1>{{number}}</h1><!--插值表达式{{}}
-->
</div>
<!--
插值表达式还有：
<h1 v-text='content'></h1>显示为<h1>hello<h1>
<h1 v-html='conent'></h1>显示为hello
-->
</div>
<script type="text/javascript">
new Vue({
el:'#root',/*el:让Vue实例接管某一元素，即与哪一DOM节点绑定，“#”千万不要忘记，Hbuilder不会报错，一个bug卡一下午都是正常的*/
/*
data:{
msg:'hello world',
number:123
},
*/
//data存放数据
data:{
content:'<h1>hello<h1>'
},
//方法
methods:{
handleClick:function(){
this.content = "world"//点击后hello变为world
}
}
})
</script>
</body>
</html>
第一次分享不太聪明的亚子，大家将就着看吧，都要多练多实践呀，今天也Vue宠（虐）爱（我）的一天！
...全文
