大前端学习之旅（10）-VUE学习知识点记录

记录VUE学习过程中的知识点

一、VUE 的安装

将 Vue.js 添加到项目中主要有四种方式：

1. 在页面上以 CDN 包的形式导入。

2. 下载 JavaScript 文件并自行托管。

3. 使用 npm 安装它。

4. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

   注：具体的可以参考官网链接

二、VUE实例

el和data参数

    const app = Vue.createApp({
        data(){
            return {
                name:'Hello,world'
            }
        },
    })
    const vm = app.mount("#app")

其中，

• el代表element，指的是要获得的某个根元素节点
• data用于数据存储

我们可以通过声明式渲染来使用这个name数据：

<div id="app">
    <h2>{{ name }}</h2>
</div>

效果：可以看到，在app下渲染出一个h2标签，里面的内容正是data里的name

三、methods方法

methds存储自定义方法，可以用this来获取data中的数据，如this.content：

<div id="app"></div>

Vue.createApp({
        data(){
          return{
              content:"*****欢迎光临*******",
          }
        },
 		methods:{
            welcomeBtnClick(){
                this.content = "欢迎光临，男宾一位"
            },
        
        template:`
            <div>
                <h1>{{content}}</h1>
                <button v-on:click="welcomeBtnClick">有顾客来</button>
            </div>
        `
        
    }).mount("#app")

四、列表渲染

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Vue.createApp({
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}).mount('#array-rendering')