本教材由知了传课辛苦制作而成,仅供学习使用,请勿用于商业用途!如进行转载请务必注明出处!谢谢!

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>

2988人已阅读,今天你学习了吗?

1条回复
  • xixihaha2022-10-17 11:16:24

    黄老师讲得好!

添加新回复