Vue.js 及Vue.js项目使用

目录

一、Vue.js

2.    安装Vue.js

3.    创建Vue实例


4.    定义属性


5.    定义方法


6.    条件渲染


7.    列表渲染


8.    表单输入绑定


二、建立一个Vue.js项目

1.    安装Vue  CLI
Vue  CLI

2.    创建新项目


3.  进入项目目录


4.    运行项目



5.  学习Vue基本语法


6.    编写组件


8.    编译和部署

---

一、Vue.js

1.    学习基础知识
在开始使用Vue.js之前，请确保您已掌握HTML、CSS和JavaScript基础知识。这些技能对于构建Vue.js应用程序至关重要。

2.    安装Vue.js

●    使用CDN：在您的HTML文件中添加以下代码：

<script  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

●    下载并引入：从Vue.js官网（https://cn.vuejs.org/）下载vue.js文件，并将其引入到项目中。

3.    创建Vue实例


在HTML文件中，添加一个div元素，它将作为Vue实例的挂载点。

例如：

<div  id="app">
   <p>{{  message  }}</p >
</div>

然后，在JavaScript中创建一个Vue实例，并将其挂载到#app元素上：

new  Vue({
   el
  '#app',
   data
  {
     message
  'Hello  Vue.js!'
   }
})

4.    定义属性


在HTML中，您可以使用v-bind指令将数据属性绑定到元素上：

<div  id="myApp">
   <p  v-bind
text="site"></p >
</div>

然后，在JavaScript中定义这些属性：

new  Vue({
   el
  '#myApp',
   data
  {
     site
  '大学'
   }
})

5.    定义方法


在Vue实例中，您可以定义JavaScript方法，并在需要时调用它们

例如：

new  Vue({
   el
  '#app',
   data
  {
     message
  'Hello  Vue.js!',
     url
  'www.example.com'
   },
   methods
  {
     reverseMessage
  function  ()  {
        this.message  =  this.message.split('').reverse().join('')
     }
   }
})

在HTML中，使用v-on指令监听方法：

<button  v-on
click="reverseMessage">点击反转消息</button>

6.    条件渲染


使用v-if、v-else-if和v-else指令进行条件渲染：

<div  v-if="type  ===  'A'">类型A</div>
<div  v-else-if="type  ===  'B'">类型B</div>
<div  v-else>类型C</div>

7.    列表渲染


使用v-for指令遍历数组并渲染列表：

<ul>
   <li  v-for="item  in  items"  :key="item.id">{{  item.text  }}</li>
</ul>

8.    表单输入绑定


使用v-model指令实现表单输入与数据对象的双向绑定：

<input  v-model="message"  />

二、建立一个Vue.js项目

1.    安装Vue  CLI
Vue  CLI

在命令行中运行以下命令：

npm  install  -g  @vue/cli

2.    创建新项目


使用Vue  CLI创建新项目，运行以下命令并按照提示操作：

vue  create  my-project

将my-project替换为您想要的项目名称。这将创建一个新的项目文件夹，并自动安装所需的依赖。


3.  进入项目目录


创建项目后，进入项目目录：

cd  my-project

4.    运行项目


在项目目录中，运行以下命令启动开发服务器：

npm  run  serve

此时，您的Vue项目将在浏览器中打开。


5.  学习Vue基本语法


Vue的基本语法包括以下部分：
●    模板：使用<template>标签编写页面结构。
●    指令：使用v-前缀的HTML属性，如v-bind、v-if、v-for等，用于绑定数据和实现交互。
●    组件：使用<component>标签创建可复用的组件。
●    计算属性：使用computed属性，根据其他属性计算得到新值。
●    方法：定义JavaScript方法，用于处理事件和业务逻辑。

6.    编写组件


在src/components目录下，创建一个新的JavaScript文件，如MyComponent.vue，并编写组件代码。例如：

<template>
   <div>
     <h2>{{  title  }}</h2>
     <p>{{  content  }}</p >
   </div>
</template>
<script>
export  default  {
   data()  {
     return  {
        title
  '欢迎组件',
       content
  '这是一个Vue组件示例。'
     };
   }
};
</script>

7.    在主组件中使用子组件
在src/App.vue文件中，导入并使用刚刚创建的子组件：
<template>
   <div  id="app">
     <MyComponent  />
   </div>
</template>
<script>
import  MyComponent  from  './components/MyComponent.vue';
export  default  {
   components
  {
     MyComponent
   }
};
</script>

8.    编译和部署

开发完成后，运行以下命令编译项目：

npm run serve

---

在创建Vue.js项目时遇到了报错问题。在此，我为您提供一些建议来解决这个问题。
首先，请确保您已经正确安装了Vue.js和相关依赖。以下是在创建Vue项目时可能遇到的一些常见报错及解决方法：

1.    报错：Module  not  found   import  {  createApp  }  from  'vue'

解决：请确保您的项目已经安装了vue`包。在命令行中运行以下命令安装：

npm  install  vue

2.    报错：Cannot  find  module  'src/components/MyComponent.vue'

解决：请确保您的MyComponent.vue文件位于src/components目录下。同时，确保在src/App.vue`中正确导入了该组件：

import  MyComponent  from  './components/MyComponent.vue';
export  default  {
   components
  {
     MyComponent
   }
};

3.    报错：TypeError   Cannot  read  property  'default'  of  undefined


解决：这个错误通常是因为在导入组件时使用了错误的语法。请确保您正确地导入了组件，例如：

import  MyComponent  from  './components/MyComponent.vue';
export  default  {
   components
  {
     MyComponent
   }
};

4.    报错：Unhandled  Rejection   TypeError   $(...).length  ===  0


解决：这个错误通常与Vue的指令v-if或v-for有关。请检查您的模板中的条件表达式，确保它们正确地过滤了数据。

5.    报错：Cannot  find  variable   $data


解决：这个错误通常是因为在模板中使用了错误的变量名。请确保您的数据变量名与实例中的变量名相同。