vue3、vite的安装，以及相关操作

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、vite、vue3安装，运行过程1、vite安装方法：
  1. // 安装 vite 命令，全局安装
  2. npm install -g vite

2、vite创建vue项目：
  1. // 创建一个项目
  2. npm init vue@latest
  • 安装过程：

3、安装包（模块）
  1. npm install

4、运行项目
  1. npm run dev

5、打包项目
  • 解析出html（dist文件夹）
  1. npm run build

二、vue的使用（相关操作）1、双向绑定：
  • 使用v-model，去掉value
  • input值改变，p值同时改变
  1. <template>
  2.     <p class="red">{{ ouyangke }}</p> 
  3.     <input v-model="ouyangke" />
  4. </template>
  5. <script>
  6. export default{
  7.   data () {
  8.     return {
  9.       ouyangke : "欧阳克"
  10.     }
  11.   },
  12. }
  13. </script>

2、v-bind 绑定
  1. <!-- v-bind 语法糖 @，后面是事件-->
  2. <!-- js的事件都可以绑定，绑定后才能使用vue的方法-->
  3. <template>
  4.     <div @click="$event => fun()" >按钮</div>
  5. </template>
  6. <script>
  7. export default{
  8.   methods : {
  9.     fun(){
  10.       alert("弹窗");
  11.     }
  12.   },
  13. </script>

3、按键绑定
  1. <template>
  2.   <div v-on:click="fun(1)">按钮</div>
  3.   <button @click="fun(2)">按钮</button>
  4. </template>
  5. <script>
  6. export default{
  7.   methods : {
  8.     fun(e){
  9.       alert("弹窗");
  10.       if( e==1 ){
  11.         this.color = "color: gray";
  12.       } else if( e==2 ){
  13.         this.color = "color: lightblue";
  14.       }
  15.     }
  16.   },
  17. }
  18. </script>

4、v-html、v-text、v-pre、v-once
  • v-htmlv-html 使用htm1代码，直接使用显示字符串,未解析用v-html可以解析html代码
  1. <template>
  2.   <div :style="color">{{ html }}</div>
  3.   <div v-html="html"></div>
  4. </template>
  5. <script>
  6. export default{
  7.   data () {
  8.     return {
  9.       color : "color: green",
  10.       html: "<span style='color:red;'>字符串0000</span>",
  11.     }
  12.   },
  13. </script>

  • v-text显示文本
  1. <template>
  2.   <div v-text="html"></div>
  3. </template>
  4. <script>
  5. export default{
  6.   data () {
  7.     return {
  8.       color : "color: green",
  9.       html: "<span style='color:red;'>字符串0000</span>",
  10.     }
  11.   },
  12. </script>

  • v-pre显示打印数据
  • v-once关闭双向绑定
  1. <template>
  2.   <input v-model="ouyangke">
  3.   <div v-once>{{ ouyangke }}</div>
  4. </template>
  6. // 方法
  7. <script>
  8. export default{
  9.   data () {
  10.     return {
  11.       ouyangke : "欧阳克111",
  12.       num : 20,
  13.       arr : [
  14.         '欧阳克','灭绝师太'
  15.       ],
  16.       color : "color: green",
  17.       html: "<span style='color:red;'>字符串0000</span>",
  18.     }
  19.   },
  20. }

5、事件修饰符：.stop、.self、.once、.prevent
  • .stop
  1. <template>
  2.   <div @click.stop="one()">事件1
  3.       <div @click.stop="two()">事件2
  4.         <div @click.stop="three()">事件3
  5.       </div>
  6.     </div>
  7.   </div>
  8. </template>
  9. <script>
  10. export default{
  11.   methods : {
  12.     one(){
  13.       alert(1);
  14.     },
  15.     two(){
  16.       alert(2);
  17.     },
  18.     three(){
  19.       alert(3);
  20.     },
  21.   },
  22. }
  23. </script>

【文章转自bgp服务器 http://www.558idc.com/yz.html提供，感恩】
更多阅读