WEB前端 - Vue - 表单

程序员日记      2019-09-16
我们现在来介绍一下Vue中表单的简单应用。首先我们知道可以用v-model指令在表单控件元素上创建双向数据绑定。示例.各种表单的简单使用<template> <divid="app">  <div>   <p>单行文本:</p>   <br/>   <inputtype="text"v-model="...
标签:
3 人看过

WEB前端 - Vue - 样式绑定

程序员日记      2019-09-16
class与style是HTML元素的属性,用于设置元素的样式,我们可以用v-bind来设置样式属性。Vue.jsv-bind在处理class和style时,专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。示例1.当isActive=true时,将绑定样式active。<template> <divid="app">  <divv-bind:class="{active:isActive}">测试绑定</d...
标签:
5 人看过

WEB前端 - Vue - 监听属性

程序员日记      2019-09-16
我们可以通过watch函数实现对属性的监听示例1.监听计数器变化<template> <divid="app">   <pstyle="font-size:25px;">计数器:{{counter}}</p>   <button@click="counter++"style="font-size:25px;">点我加1</button> <...
标签:
8 人看过

WEB前端 - Vue - 函数与计算属性

程序员日记      2019-09-11
函数:methods计算属性:computed。示例<template> <divid="app">  <p>原始字符串:{{message}}</p>  <p>方法示例,反转字符串:{{reversedMessage2()}}</p>  <p>计算属性示例,反转字符串:{{reversedMessage}}</p> &n...
标签:
15 人看过

WEB前端 - Vue - 条件语句与循环语句

程序员日记      2019-09-11
条件语句v-if,v-else-if,v-else指令和v-show指令使用示例<template> <divid="app">  <pv-if="demo1">你看的到我</p>  <pv-if="demo2">你看不到我</p>  <pv-else>你看的到我2</p>  <pv-if="demo3"&...
标签:
12 人看过

WEB前端 - Vue - 基础语法

程序员日记      2019-09-11
文本数据绑定最常见的形式就是使用{{...}}(双大括号)的文本插值<template> <divid="app">  {{message}} </div></template><script>exportdefault{ name:'App', data:function(){  return{  message:"你好,欢迎来到程序员...
标签:
18 人看过

WEB前端 - Vue - webpack目录结构与第一个项目示例

程序员日记      2019-09-11
我们使用npm安装了基于webpack框架的vue,我们得了解一下webpack框架创建项目的目录结构目录结构build:项目构建(webpack)相关代码config:配置目录,包括端口号等。我们初学可以使用默认的。node_modules:npm加载的项目依赖模块src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: --assets:放置一些图片,如logo等。 --components:目录里面放了一个组件文件,可以不用。&nbsp...
标签:
13 人看过

WEB前端 - Vue - 安装

程序员日记      2019-09-11
安装方式1.下载到本地并安装下载链接https://vuejs.org/js/vue.min.js安装方式2.引用CDN官方<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>几个国内的CDN<scriptsrc="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><scriptsrc="http...
标签:
17 人看过

Laravel - Eloquent 模型 - 访问器和修改器

程序员日记      2019-09-10
定义访问器(get字段名Attribute())访问器在访问字段的值时会根据访问器中设置的规则自动把值修改成指定格式的值。<?phpnamespaceApp;useIlluminate\Database\Eloquent\Model;classUserextendsModel{  /**   *获取用户的名字   */  publicfunctiongetFirstNameAttribute...
标签:
16 人看过

Laravel - Eloquent 模型 - 关联查询

程序员日记      2019-09-09
所有Eloquent关联关系类型同时也是查询构建器,允许你在最终数据库执行SQL之前继续添加条件约束到关联查询上。示例1.通过关联方法访问关联对象在模型中定义关联<?phpnamespaceApp;useIlluminate\Database\Eloquent\Model;classUserextendsModel{  /**   *获取指定用户的所有文章   */  publicfunct...
标签:
30 人看过