首页 > 其他分享 >1、vue初体验

1、vue初体验

时间:2023-11-30 16:17:44浏览次数:25  
标签:初体验 name number vue products testVue 页面

1、在页面上引用 vue.mim.js 文件,有个  min 的是压缩的意思。

<script tppe="../vue.min.js"></script>

2、在页面上添加 div 元素,然后添加一个列表,让产品展示出来

 <div  id="showPage"> 

  <h1> 系统名称:{{  title }}   </h1>

 <ul>

      <li  v-for="item in products">名称:{{item.name}} <span> {{item.number}} </span>    </li>

 </ul>

</div>

<script>

// 创建一个构造函数

var testVue=new Vue({

         el:"#showPage", // 作用于哪个元素

          data:{    //  数据

              title:"库存管理系统",

                products:[{   name:"iphone", number:10  },{name:"xiaomi", number:5},{    name:"huawei", number:8},] }

})

</script>

 

在浏览器中我们可以通过代码修改页面的数据:

 // 插入新数据

      testVue.products.push({  name:"apple", number:65})

// 删除第一条iPhone的数据

      testVue.products.splice(0,1)

 

(3)增加一个删除事件

 

标签:初体验,name,number,vue,products,testVue,页面
From: https://www.cnblogs.com/dreamhouse/p/17867520.html

相关文章

  • vue3,Nginx部署情况
    一.Vue3项目情况说明router文件夹下的index.jsimport{createRouter,createWebHashHistory}from"vue-router"constroutes=[{path:'/saoma',name:'Saoma',//redirect:'/saoma',component:()......
  • vue关于自定义指令
    私有自定义指令(在与data()同级结构中进行配置)//私有自定义指令的节点directives:{//定义名为color的指令,指向一个配置对象color:{//当指令第一次被绑到元素上的时候,会立即触发bind函数,只会调用一次//形参中的el表示当前指令所绑定到的那个d......
  • Vue 项目配置自动更新,自动刷新页面
    今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能效果预览http://demo.webwlx.cn/#/update实现思路1.把当前版本的编译时间,通过环境变量的方式保存起来打开vite.config.jsim......
  • vue3页面中,两个相同组件,一个卸载,一个挂载,后展示的组件事件监听不生效?
    场景:在实际开发中,遇到了这样一种场景,vue3页面,两个相同组件,在满足某条件下展示第一个组件,满足另一个条件下,隐藏第一个组件,同时展示第二个组件,比如反馈组件,会通过window.addEventListener来监听自定义的反馈弹窗展示和隐藏事件。结果:两个相同组件一个卸载,一个挂载,第一个组监听的......
  • 关于vue中的动态组件component和keep-alive
    component标签是vue内置的,作用:组件的占位符<componentis="组件名称"></component>其中is属性的值表示要渲染的组件的名字,也就是components节点下的组件名称当我们动态切换组件名称时,每切换一次,组件就会被销毁一次,若不想让组件被销毁,则需要用到标签keep-alive<keep-al......
  • 在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
    转载于在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯-DCloud问答uni-app的web-view组件,支持加载远程网页,在app环境下,还支持加载本地HTML页面。在web-view加载页面中,会涉及wx、plus、uni等对象的使用。在小程序下使用wx的api,需要引入微信提供的https......
  • Vue 嵌套选项卡 购物车
    嵌套选项卡  <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"> <scriptsrc="js/vue.js"></scrip......
  • vue-treeselect使用案例
    https://vue-treeselect.js.org/父子节点没有关联<TreeSelectflatstyle="background-color:#0e3977"placeholder="请选择"v-model="org":multiple="true":options="state.orgData&qu......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
    项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue,内容如下:<scriptsetuplang="t......
  • [Vue] vue学习笔记(3): 渲染
    条件渲染主要有四个指令v-show:控制元素可视性,即是否增加样式display=nonev-if/v-else-if/v-else:类似if/else-if/else的逻辑结构,进行条件判断,控制元素的可视性,注意这种方法会直接决定元素是否出现DOM树上,而非样式改变<!---nisapropertyofvueinstance---><divv-if......