随笔分类 - Vue
摘要：1.场景模拟 现在我们来实现这样一个功能： 一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换： 1.1 编写父组件 为了让接下来的功能比较清晰，我们先新建一个文件夹：src 然后新建一个HTML文件，作为入口：index.html 然后编写页面的基本结构： <div id="app">
阅读全文
摘要：我们通过Vue的component方法来定义一个全局组件。 <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <scri
阅读全文
摘要：watch可以让我们监控一个值的变化。从而做出相应的反应。 示例： <div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <
阅读全文
摘要：在插值表达式中使用js表达式是非常方便的，而且也经常被用到。 但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值： data:{ birthday:1529032123201 // 毫秒值 } 我们在页面渲染，希望得到yyyy-M
阅读全文
摘要：html属性不能使用双大括号形式绑定，只能使用v-bind指令。 在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 <div id="app"> <!--可以是数据模型，可以是具有返回值的js代码块或者函数-
阅读全文
摘要：1.基本使用 v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。 语法： v-if="布尔表达式" 示例： <div id="app"> <button v-on:click="show = !show">点我呀</button> <br> <h1 v-if="show">
阅读全文
摘要：遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。 1.遍历数组 语法： v-for="item in items" items：要遍历的数组，需要在vue的data中定义好。 item：迭代得到的数组元素的别名 示例： <div id="app"> <ul> <li v-for=
阅读全文
摘要：1.基本用法 v-on指令用于给页面元素绑定事件。 语法： v-on:事件名="js片段或函数名" 示例： <div id="app"> <!--事件中直接写js片段--> <button v-on:click="num++">增加一个</button><br/> <!--事件指定一个回调函数，必须
阅读全文
摘要：刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。 既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有： input
阅读全文
摘要：什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如我们在入门案例中的v-on，代表绑定事件。 1.花括号 格式： {{表达式}} 说明
阅读全文
摘要：1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： el data methods 等等... 接下来我们一 一介绍。
阅读全文
摘要：我们在页面添加一个按钮： <button v-on:click="num++">点我</button> 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num 普通click是无法直接操作num的。 效果：
阅读全文
摘要：我们对刚才的案例进行简单修改： <body> <div id="app"> <input type="text" v-model="num"> <h2> {{name}}，非常帅！！！有{{num}}位女神为他着迷。 </h2> </div> </body> <script src="node_mo
阅读全文
摘要：在hello-vue目录新建一个HTML 在hello.html中，我们编写一段简单的代码： h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。 然后我们通过Vue进行渲染： <body> <div id="app"> <h2>{{name}}，非常帅！！！</h2> </div> </b
阅读全文
摘要：创建一个新的空工程： 然后新建一个module： 选中static web，静态web项目： 位置信息： 在idea的左下角，有个Terminal按钮，点击打开控制台： 进入hello-vue目录，先输入：npm init -y 进行初始化 安装Vue，输入命令：npm install vue --
阅读全文
摘要：NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。 1.下载Node.js 下载地址：https://nodejs.org/en/ 推荐下载LTS版本。 课程中采用的是8.1
阅读全文
浙公网安备 33010602011771号