Vue介绍
Vue
(读音/vjuː/
,类似于view
) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪
开发出来的,目前是全球“最”流行的前端框架。使用vue
开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能!
Vue安装和使用:
vue
的安装大体上分成三种方式,第一种是通过script
标签引用的,第二种是通过npm(node package manager)
来安装,第三种是通过vue-cli
命令行来安装。作为初学者,建议直接通过第一种方式来安装,把心思集中在vue
的学习上,而不是安装上。
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>
# 生产环境,使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.min.js"></script>
基本使用:
要使用Vue
,首先需要创建一个Vue
对象,并且在这个对象中传递el
参数,el
参数全称是element
,用来找到一个给vue
渲染的根元素。并且我们可以传递一个data
参数,data
中的所有值都可以直接在根元素下使用{{}}
来使用。示例代码如下:
<div id="app">
<p>{{username}}</p>
</div>
<script>
Vue.createApp({
data: {
"username": "知了课堂"
}
}).mount("#app");
</script>
其中data
中的数据,只能在vue
的根元素下使用,在其他地方是不能被vue
识别和渲染的。比如:
<div id="app">
</div>
<!-- 这里渲染不了 -->
<p>{{username}}</p>
<script>
Vue.createApp({
data: {
"username": "知了课堂"
}
}).mount("#app");
</script>
另外也可以在vue
对象中添加methods
,这个属性中专门用来存储自己的函数。methods
中的函数也可以在模板中使用,并且在methods
中的函数来访问data
中的值,只需要通过this.属性名
就可以访问到了,不需要额外加this.data.属性名
来访问。示例代码如下:
<div id="app">
<p>{{greet()}}</p>
</div>
<script>
Vue.createApp({
data: {
"username": "知了课堂"
},
methods: {
greet: function(){
return "下午好!" + this.username
}
}
}).mount("#app");
</script>