发表于： 2020-05-09 21:11:34
0 1935
一、今天完成的事情
今天主要学习了vue的一些基本知识，重新安装了node.js npm 但是还不知道怎么用，好像是快速搭建脚手架用的？？？不明白，还安装了express
每个vue应用都需要通过实例化vue来实现
语法格式如下
var vm = new Vue（｛
//选项
｝）
当一个vue实例被创建时，他向vue的响应式系统中加入了其data'对象中能找到的所有的属性，当这些属性的值发生改变时，html视图也将会产生响应的变化
除了数据属性，vue实例还提供了一些有用的实例属性和方法，他们那都有前缀$，以便于用户定义的属性区分开来，就是在属性之前加$
vue模板语法
vue.js 使用了基于html的模板语法，允许开发者声明式地将DOM绑定至底层vue实例的数据
vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统
结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上
插值
文本
数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值
html
使用v-html指令用于输出html代码
属性
html属性中的值应使用v-bind指令
表达式
vue都提供了完全的JavaScript表达式支持
指令
指令都是带有v-前缀的特殊属性
指令用于在表达式的值改变时，将某些行为应用到DOM上
参数
参数在指令后以冒号指明，例如，v-bind指令被用来响应地更新html属性
另一个例子是v-on指令，它可以监听DOM事件：
<a v-on:click = "doSomething"> 在这里参数是监听的事件名
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如 .prevent修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
用户输入
在input输入框中我们可以使用v-model指令来实现双向数据绑定
v-model指令用来在input、select、textarea，CheckBox，radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应
以下实例在用户点击按钮后对字符串进行反转操作
过滤器
vue.js允许你自定义过滤器，被用作一些常见的文本格式化，由“管道符”指示，格式如下：
过滤器可以串联，过滤器是JavaScript函数，因此可以接受参数
这里，message是第一个参数，字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数
缩写
v-bind缩写
Vue.js为两个最为常用的指令提供了特别的缩写
v-on缩写
Vue.js条件与循环
条件判断
v-if
条件判断使用v-if指令：v-if指令将根据表达式seen的值（true或者false）来决定是否插入元素p
在字符串的模板中，如Handlebars，我们得像这样写一个条件快：
v-else
可以用v-else指令给v-if添加一个“else”块
v-else-if
v-else-if在2.1.0新增，顾名思义，就是用作v-if的else-if块。可以链式的多次使用：
v-show
我们也可以使用v-show指令来根据条件展示元素
循环语句
循环使用v-for语句
v-for指令需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名
v-for可以绑定数据到数组来渲染一个列表
模板中使用v-for：
v-for迭代对象
v-for可以通过一个对象的属性来迭代数据
v-for
二、遇到的困难
v-for的迭代对象什么意思还不明白
对于vue来使用脚手架迅速搭建一个项目还不是很明白怎么回事，我看到是用命令行写的
三。明天要做的事情
继续学习一下vue的文档
四、收获
简单学习了vue的循环，文本的插值，事件绑定，条件与循环等等
返回列表
评论