VUE 3.X、VS Code的打开、运行VUE项目、 VUE基础函数与语法

最新推荐文章于 2024-07-12 16:09:07 发布

常怀百岁忧

最新推荐文章于 2024-07-12 16:09:07 发布

阅读量489

点赞数

文章标签：前端 vscode vue 学习 Powered by 金山文档

本文链接：https://blog.csdn.net/changhuaiyou/article/details/128986184

版权

VS Code的打开

微软官方下载VS Code工具，打开

VS Code添加下面这两个插件：Live Server(一个小型服务器，调试用的)、HTML Boilerplate

运行VUE项目

a. "终端(Terminal)" -- "新建终端"

b.新建项目：

vue create vue-01

c. 进入项目：

cd  vue-01

d.运行项目：

npm  run serve

VUE基础函数与语法

vue.createApp({  })     
//createApp可以分解成create和App来看,可以理解成创建一个vue应用。createApp方法会返回一个vue实例对象

mount()
//挂载的意思,需要一个字符串型参数。与css选择器配合使用,一般都是使用ID选择器,比如mount("#app"),意思就是将ID为app的节点挂载到VUE上

data
//在vue实例中，data可以是对象的形式data{键值对},数据类型可以是基本数据类型/数组/对象/对象数组；
//           data也可以是函数的形式data(){}
//但是在vue组件中,只能是函数形式data(){}
/*实例：
    data{
            name:"常怀",    //定义字符串
            hobby:["篮球","网球"],   //定义数组
            iden:{id:10,address:"河北省石家庄"},   //定义对象
            users:[                                    //定义数组对象
                    {id:10,address:"河北省石家庄"},
                    {id:11,address:"北京市石景山"},
                    {id:12,address:"江苏省南京市"}
                ]
        }
*/

v-bind     //单项绑定，数据只能从data流向页面
v-model    //双向绑定，数据在data和页面之间双向流动
           //之间的区别：v-bind能赋值给任何属性，但是v-bind只能给表单，也就是只能赋值给带有value属性的元               素，如text/radio/checkbox/selected,这个也很好理解，v-model就是收集value属性值
           //<input v-model="text"> 取代 <input type="text">

<button v-on:click="">修改</button> //vue中取代onclick="",v-on指令可以缩写为<button @click="">
<button v-on:change="">修改</button> //vue中取代onchange=""
//vue.js为v-on提供了事件修饰符来处理Dom事件细节
//v-on:click.once="" :只触发一次
//v-on:click.left="" :左键事件
//v-on:click.righr="":右键事件

methods
//data里面放属性，method里面放方法，
//例：methods:{
//       update(){
            //方法体
//       }
//    }

debugger
//<script>中，设置断点
//例：methods:{
//            update(){
//                      debugger
//                      this.text = "vue.js+webApi"
//                    }
//            }

v-for
//属性循环事件，一般是循环数组的形式
//例：
//数组为data(){return{users:[{id:1,stuName:'化工',add:'山东'},{id:2,stuName:'画刷',add:'安徽'}]}}
//<table>
//    <tbody>
//       <tr v-for="user in users">
//           <td>{{user.id}}</td>
//           <td>{{user.stuName}}</td>
//           <td>{{user.add}}</td>
//       </tr>
//    </tbody>
//</table>

v-if || v-else
//属性判断语句
//例：<div v-if="users.length==0">
//       <h1 style="color:red">抱歉没有数据</h1>
//   </div>
//   <div v-else>
//    
//   </div>

.split('')    //切割
.reverse()    //翻转
.join('')    //合并
//例：
//data: { message: 'Runoob!' }
//{{ message.split('').reverse().join('') }}

computed    //计算属性关键词
//computed是基于他的依赖缓存，只有相关依赖发生改变时才会重新取值;而使用method,在重新渲染时函数总是会重新调用
//可以说使用computer性能会好一些，但是如果不希望使用缓存，那你可以使用method属性
//例
//computed:{
//            reverseMessage:function(){
//                            return this.message.split('').reverse().join('')
//                          }
//         }

document.write()

html基础语法

html属性：
    <div ID="WebFormMain" || class="WebFormMain"></div>      
    //属性ID: 定义元素的唯一id || 属性Class: 为html元素定义一个或多个类名

    <table><tbody><tr><td>          
    //创建表格

    <img src="">                    
    //图片显示不能直接放到{{}}里，要使用属性img,并传递到src里面

    <input type="text"||type="submit" value="提交">    
    //input表单，在<form>元素中使用

    <button onclick=""||onchange="">修改</button>  
    //按钮,onclick点击事件,v-on:click=""||@click

    <h1 style="color:red"></h1>
    
    <span>可以使元素在一行上显示,又能改变padding/margin的top/bottom/left/right</span>

style

table{
    border-collapse:collapse   /*表格内边框和外边框合并*/
}

span{
    display:inline-block  /*行内块元素*/
    box-shadow:2px 2px   /*阴影*/
    border-radius:2px    /*圆弧*/
}

echarts: 是一款基于javascript的数据可视化图表库、开源、兼容当前绝大部分浏览器
         引入<script src="echarts.js"></script>