Vue01

第一个vue程序{{}}


  
    {{message}}

V-bind:


  
    
      鼠标悬停几秒钟查看此处动态绑定的提示信息！

v-for


  

    {{item.name}}-{{item.age}}
    {{idx}}-{{item.name}}-{{item.age}}

v-if

v-on:click监听事件

v-model 表单中使用数据双向绑定

你可以用 v-model 指令在表单 </code> <code><select></code> 标签上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素。<br> 注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而是将vue实例的数据作为数据来源。</p> <pre><code class="language-html"><body> <div id="app"> 姓名：<input type="text" v-model="name">{{name}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var kcl = new Vue({ el: "#app", data: { name: '我是大傻逼' } }) </script> </body> </code></pre> <p></p> <pre><code class="language-html"><body> <div id="app"> <input type="radio" name="sex" value="男" v-model="sex">男 <input type="radio" name="sex" value="女" v-model="sex">女 {{sex}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var kcl = new Vue({ el: "#app", data: { sex: '男' } }) </script> </body> </code></pre> <p></p> <pre><code class="language-html"><body> <div id="app"> <select name="select" id="" v-model="kcl"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> {{kcl}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var kcl = new Vue({ el: "#app", data: { kcl: 'A' } }) </script> </body> </code></pre> <p></p> <h1 id="vue组件">Vue组件</h1> <p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树<br> <br> 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：<br> 组件其实是一个自定义标签</p> <pre><code class="language-js"><body> <div id="app"> <kcl></kcl> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> //定义一个vue组件 Vue.component( "kcl",{ template: '<li>Hello</li>' }); var kcl = new Vue({ el: "#app", data: { } }) </script> </body> </code></pre> <p>绑定数据到组件</p> <ol> <li>组件通过v-bind：xxx传递值组件中</li> <li>组件中通过props接收变量</li> <li>组件中使用props中的变量</li> </ol> <pre><code class="language-js"><body> <div id="app">  <kcl v-for="item in items" v-bind:val="item"></kcl> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> //定义一个vue组件 Vue.component( "kcl",{ props: ['val'], //使用props接收组件传递的值 template: '<li>{{val}}</li>' //使用props中的值 }); var kcl = new Vue({ el: "#app", data: { items:[ "java", "c++", "linux" ] } }) </script> </body> </code></pre> <h1 id="vue生命周期">Vue生命周期</h1> <p><br> <br> </p> <h1 id="axios">Axios</h1> <pre><code class="language-html"><body> <div id="app"> <li v-for="item in list">{{item.name}}-{{item.age}}</li> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var kcl = new Vue({ el: "#app", data: { list: [] }, mounted(){ axios.get('./kcl.json').then((res)=>{ console.log(res.data); this.list = res.data; }) } }) </script> </body> </code></pre> <h1 id="计算属性">计算属性</h1> <p>计算出来的结果保存在属性中，在内存中运行：虚拟DOM<br> 计算属性显示后存储在内存中，如果计算属性不变，那么该计算属性不发生改变，直接在内容中取</p> <pre><code class="language-html"> <body> <div id="app">  <p>{{currentTime1()}}</p>  <p>{{currentTime2}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var kcl = new Vue({ el: "#app", data: { }, methods: { currentTime1: ()=> Date.now() }, computed:{ currentTime2: ()=> Date.now() } }) </script> </body> </code></pre> <h1 id="插槽">插槽</h1> <pre><code class="language-html"> <div id="app"> <todo></todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> Vue.component("todo",{ template: '<div>\ <div>待办事项</div>\ <ul>\ <li>Java</li>\ </ul>\ </div>' }); </code></pre> <pre><code class="language-html"> <body> <div id="app"> <todo> <todo-title slot="todo-title" :A="title"></todo-title>  <todo-items slot="todo-items" v-for="name in nameList" :B="name"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> Vue.component("todo",{ template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props: ['A'], template: '<div>{{A}}</div>' }); Vue.component("todo-items",{ props: ['B'], template: '<li>{{B}}</li>' }); var kcl = new Vue({ el: "#app", data: { title: '用户列表', nameList: ['zhangsan','lisi','wangerma'] } }); </script> </body> </code></pre> <h1 id="自定义事件内容分发">自定义事件内容分发</h1> <pre><code class="language-html"><body> <div id="app"> <todo> <todo-title slot="todo-title" :A="title"></todo-title>  <todo-items slot="todo-items" v-for="(name,index) in nameList" :B="name" :index="index" v-on:rem="removeItems(index)" :key="index"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> Vue.component("todo",{ template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props: ['A'], template: '<div>{{A}}</div>' }); Vue.component("todo-items",{ props: ['B','index'], //只能绑定当前组件的方法 template: '<li>{{index}}-{{B}} <button @click="remove">删除</button></li>', //组件内只能调用组件内的方法 methods:{ remove: function (index) { //想办法调用kcl对象中的方法 this.$emit('rem',index) } } }); var kcl = new Vue({ el: "#app", data: { title: '用户列表', nameList: ['zhangsan','lisi','wangerma'], }, methods: { removeItems: function (index) { console.log("删除了" + this.nameList[index] + "ok"); this.nameList.splice(index,1); } } }); </script> </body> </code></pre> <p></p> <h1 id="第一个vue-cli项目">第一个vue-cli项目</h1> <h2 id="介绍">介绍</h2> <p>vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板<br> 预先定义好的目录结构及基础代码，就好比咱们在创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架<br> 主要的功能：</p> <ul> <li>统一的目录结构</li> <li>本地调试</li> <li>热部署</li> <li>单元测试</li> <li>集成打包上线</li> </ul> <h2 id="需要的环境">需要的环境</h2> <p>Node.js ： http://nodejs.cn/download<br> 安装就无脑下一步就好，安装在指定目录下，不需要配置环境变量，自动配置<br> Git: https://git-scm/download/<br> 确认nodejs安装成功<br> cmd下输入 <code>node -v</code>，查看是否能够正确打印版本号<br> cmd下输入<code>npm -v</code>,查看是否能够正确打印出版本号<br> 这个npm是一个软件包管理工具，就和linux的apt软件安装包差不多<br> 安装node.js淘宝镜像加速器(cnpm)</p> <pre><code>sudo npm install cnpm -g 或者不安装cnpm，每次安装其他软件包是使用下面这条命令 npm install --registry=https://registry.npm.taobao.org </code></pre> <p><strong>安装 vue-cli</strong><br> <code>cnpm install vue-cli -g</code><br> <br> 测试是否安装成功<br> 查看可以基于哪些模板创建vue应用程序<br> <code>vue list</code><br> </p> <h2 id="创建项目">创建项目</h2> <p><strong>在指定文件下,初始化webpack项目</strong><br> <code>vue init webpack myvue</code></p> <ul> <li>Project name: 项目名称，默认回车即可</li> <li>Project description: 项目描述，默认回车即可</li> <li>Author：项目作者，默认回车即可</li> <li>Install vue-router: 是否安装vue-router,选择n不安装(后期手动添加)</li> <li>Use ESLint to lint your code: 是否使用ESLint做代码检查，选择n不安装</li> <li>Set up unit tests: 单元测试相关，选择n不安装(后期需要手动安装)</li> <li>Setup e2e tests with Nightwathch: 单元测试相关，选择n不安装(后期需要再手动添加)<br> 创建完成后直接初始化，选择n，后运行结果<br> </li> </ul> <p><strong>初始化并运行</strong><br> <br> 在该文件夹下进行npm install操作</p> <pre><code class="language-java">cd demo01 //进入到安装项目的文件夹下，根据package.json进行安装依赖 //创建文件时已经使用了npm就不需要这样操作了 npm install //安装所有依赖环境,package.json npm run dev </code></pre> <p><br> <code>ctrl+c</code>退出</p> <h1 id="什么是webpack">什么是Webpack</h1> <p>本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，他会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle<br> Webpack是当下最热门的前端资源模块化管理和打包工具，它将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载，通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、lESS等<br> 打包成bundle.js</p> <p>安装<br> <code>npm install webpack -g</code><br> <code>npm install webpack-cli -g</code><br> 测试安装成功<br> <code>webpack -v</code><br> <code>webpack-cli -v</code><br> </p> <h2 id="配置">配置</h2> <p>webpack.config.js配置文件</p> <ul> <li>entry: 入口文件，指定webpack用哪个文件作为项目的入口</li> <li>output：输出，指定webpack把处理完成的文件放置到指定路径</li> <li>module: 模块，用于处理各种类型的文件</li> <li>plugins: 插件，如：热更新、代码重用</li> <li>resolve：设置路径指向</li> <li>watch：监听，用于设置文件改动后直接打包<br> </li> </ul> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid239-0.html' class='tagbtn' target='_blank'>vue</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565979.html">创建vue项目的第一步——之安装vue 命令更新了</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565990.html">vue打包报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565272.html">vue登录页面后台返回验证码图片</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564897.html">vue axios 1 创建项目及简单配置axios</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564552.html">vue两层list循环后，内层循环页面选择类型</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564506.html">HMVue1.5【Source Map】</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563914.html">vue代理服务器proxy详情配置信息</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562341.html">[转]Vue-cli3.x引入本地json报404 解决方案</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562421.html">[转]Vue CLI 3搭建vue+vuex 最全分析</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561824.html">AntDesign vue学习笔记（三）嵌套路由使用</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561925.html">vue 多项目部署---二级目录</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>