YII2入门上学记录

By admin in 4858.com on 2019年2月12日

  最近也在学习laravel的框, 因为后边学过tp框架,
都说laravel是最优雅的框架,所以开学后不禁去试试那么些在国外已经火的不用不要的框架.
如上所述,对于学习完tp框架后,我认为tp终归是中国人和好写的,所以重重考虑依然很好接受的,借使你想对php框架入门的话,我倒觉得tp是个挺不错的选项。当然ci框架也是一个很正确的挑选。因为它充裕轻量级。tp的mvc架构会让你很好接受。在前后台的行使上看起来很有益于。当然那在yii框架里好像更简单方便些,因为本身只是接触国yii框架,不是特意驾驭。在接下去本人想去会一会这一个框架。但laravel应该还得再上学,本身用laravel写了祥和的博客。当然还索要完善。因为在我眼里laravist那些laravel国内的录制社区时自个儿有也种想法。做不到那么好。但最少我觉着能已毕和谐的部分需求也是一件好事。
  接下来说说自家接触laravel的那段时间的感受啊。laravel真的会有种让您打开眼界。因为自身在homestead就是laravel官方推荐的环境中读书的。所以我很有认知就是首先laravel对于数据的田间管理太强大了。从前确实不知情数据库也得以这么变化。包罗对数据库的备份。有时它就充当了诸多数据库的效应,而那么些用命令行都可以化解.这么些我想太方便了。然后就是自我的一部分囊括路由,控制器,请求等的管住也要命淡雅。也是透过命令行生成本身索要的处理公事。当然你也足以协调新建文件夹举办管理。还有一个就是laravel的插件也很丰硕,具体的可以看那些网站
  接着说下laravel5.3将来官方默许的Vue.Js前端框架吧。因为它是认为美籍华夏族写的,也曾经在谷歌(Google)工作,不言而喻。所以说中文文档神马的也算丰硕的。与其余的诸如angularJs,ReactJs比较,VueJs也针锋相对不难,相呼应的求学花费也少。以前有对angularJs写过部分粗略的东西,算不上多询问,也是因为那时候没有察觉到这个对于我当下的重中之重。当然今后自身面临着laravel所以我不假思索的踏上了VueJs的求学之路。以后自家刚上大三,课程也少,有的课我认为并没关系意思,我也会把那时刻还不如去敲敲的代码。Vue.Js才没学多长时间,当然那种入门的话几天就基本上了,每一天到底有那么多时光。接下来laravel还有许多的本身得去体会体会。

  近来也在求学laravel的框, 因为前面学过tp框架,
都说laravel是最优雅的框架,所以开学后不禁去尝试那几个在国外已经火的永不不要的框架.
总的看,对于学习完tp框架后,我认为tp毕竟是神州人和好写的,所以广大考虑依然很好接受的,固然你想对php框架入门的话,我倒觉得tp是个挺不错的取舍。当然ci框架也是一个很正确的挑三拣四。因为它丰裕轻量级。tp的mvc架构会让您很好接受。在前后台的行使上看起来很便利。当然那在yii框架里好像更简明方便些,因为自己只是接触国yii框架,不是专门驾驭。在接下去本人想去会一会这么些框架。但laravel应该还得再学习,自身用laravel写了团结的博客。当然还亟需通盘。因为在本人看来laravist那么些laravel国内的视频社区时本人有也种想法。做不到那么好。但最少我觉着能促成本身的部分须求也是一件善事。
  接下来说说自家接触laravel的那段时光的感受啊。laravel真的会有种让你打开眼界。因为本身在homestead就是laravel官方推荐的条件中读书的。所以我很有体会就是首先laravel对于数据的军事管制太强大了。从前确实不知道数据库也可以这么变化。包罗对数据库的备份。有时它就充当了累累数据库的成效,而这个用命令行都可以解决.这一个我想太方便了。然后就是本人的局地包涵路由,控制器,请求等的治本也丰盛优雅。也是经过命令行生成自身需求的拍卖文件。当然你也足以本人新建文件夹进行保管。还有一个就是laravel的插件也很丰硕,具体的可以看那么些网站
  接着说下laravel5.3将来官方默许的Vue.Js前端框架吧。因为它是认为美籍华夏族写的,也一度在谷歌(Google)工作,简而言之。所以说国语文档神马的也算充足的。与其他的诸如angularJs,ReactJs相比较,VueJs也针锋相对简单,相呼应的上学开销也少。此前有对angularJs写过局地简易的东西,算不上多询问,也是因为那时候没有察觉到那一个对于本身当下的要紧。当然以后本人面临着laravel所以我坚决的踏上了VueJs的上学之路。将来我刚上大三,课程也少,有的课我认为并没什么意思,我也会把那日子还不如去敲敲的代码。Vue.Js才没学多长期,当然那种入门的话几天就大多了,天天到底有那么多日子。接下来laravel还有为数不少的自个儿得去体会体会。

安装YII2

在担保composer安装已毕后经过composer安装YII2

composer global require "fxp/composer-asset-plugin:^1.3.1"
composer create-project --prefer-dist yiisoft/yii2-app-basic basic

率先条命令为大局安装一个js的包管理工具,是为着通过composer管理bower与npm包。
第二条命令为安装yii2-app-basic(并不是安装yii2),并取名为basic。与laravel差别,yii2是系列与运用分开管理的。所以假如实施以下命令会安装yii2项目。

composer require yiisoft/yii2

composer在安装yii2进度中会必要github账户新闻(因为github对匿名调用API有次数限制),所以要为composer配置github的OAuth
token

composer config -g github-oauth.github.com <your oauth token>

随着 2016 年的总计,大家来看看 二〇一六年 国内最火且没有之一的前端MVVM 框架
VueJs

注意

YII2入门上学记录。github的OAuth token并不是ssh,他应有长这些样子

token => axxxxxxx69a76f7b4021e2bbebcxxxxxxxxxxd
ssh => 79:xx:xx:xx:xx:9d:8f:51:xx:2b:xx:27:xx:xx:xf:xx

此外OAuth token只会在您布署完github的Personal access
tokens后才会转移,并且只会并发一次,但您可以重新生成仍旧再创制一个token。所以个人指出再新建token,方便权限管理,同时幸免token修改后使用原token的施用重新配置。
花色设置到位后陈设nginx服务器。注意yii2与laravel美化url的参数不相同。此后拜会相应地方即可。

 location / {
        try_files $uri $uri/ /index.php?$args;
    }

固然 到写文章的那个时间点,VueJs已经发表了 2.1.x 了, 不过对于许多 Vuejs
的初学者来讲,我提出仍旧 从 VueJs 1.x 的末尾一个版本伊始看。

目录结构

yii2与laravel目录结构类似

basic/                  应用根目录
    composer.json       Composer 配置文件, 描述包信息
    config/             包含应用配置及其它配置
        console.php     控制台应用配置信息
        web.php         Web 应用配置信息
    commands/           包含控制台命令类
    controllers/        包含控制器类
    models/             包含模型类
    runtime/            包含 Yii 在运行时生成的文件,例如日志和缓存文件
    vendor/             包含已经安装的 Composer 包,包括 Yii 框架自身
    views/              包含视图文件
    web/                Web 应用根目录,包含 Web 入口文件
        assets/         包含 Yii 发布的资源文件(javascript 和 css)
        index.php       应用入口文件
    yii                 Yii 控制台命令执行脚本

总归一旦你明白了 1.X 那么您在学习 2.X
的时候,大概只须求一天时间,就能左右,真的 是一天教会你 VueJs
感觉不要太爽噢~

HELLO YII2

由于yii2也应用mvc格局,所以一律具有视图,模型与控制器。

  • 视图文件
    layouts文件夹存放布局文件;
    site文件夹存放页面文件
  • 控制器文件
    控制器文件位于controllers目录下,命名规则为(类似驼峰命名):
    控制器名+Controller => SiteController.php
    与laravel类似,但控制器中有些情势名有特殊意义(类似驼峰命名)。
    action+操作名 => actionSay($message){}
    此方法可使用户通过路由进行走访,如
    index.php?r=site/say&message=Hello+World
    其中r为路由,site/say为SiteController@actionSay,这点与laravel不同
    ,message=Hello+World为actionSay($message)的参数

不要问我何以,仍然这句话,你试过就明白。4858.com 1

利用表单

  • model文件
    身处models文件夹下,model类的命名空间为

namespace app\models;

其间app为约定义别名,与laravel中别名相似,可用以下形式定义

Yii::setAlias('@foo', '/path/to/foo');

[[yii\base\Model]]
被用于一般模型类的父类并与数据表无关。[[yii\db\ActiveRecord]]
寻常是普通模型类的父类但与数码表有关联,[[yii\db\ActiveRecord]]
类其实也是继承自
[[yii\base\Model]],增加了数据库处理,与laravel的model类相似。

<?php
namespace app\models;
use yii\base\Model;
class EntryForm extends Model
{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}

其间rules()作用与larvel的过滤类似,只是写法上不太雷同。而且假设有多少印证失利,yii2将把
[[yii\base\Model::hasErrors|hasErrors]] 属性设为
ture,想要知道具体暴发什么错误就调用
[[yii\base\Model::getErrors|getErrors]]。

  • 修改控制器

<?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use app\models\EntryForm;
class SiteController extends Controller
{
    // ...其它代码...
    public function actionEntry()
    {
        $model = new EntryForm;

        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // 验证 $model 收到的数据

            // 做些有意义的事 ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // 无论是初始化显示还是数据验证错误
            return $this->render('entry', ['model' => $model]);
        }
    }
}

render(‘entry-confirm’, [‘model’ =>
$model])意为将该模型$model(EntryForm)命名为model并提交到entry-confirm.php页面进行渲染。

  • view页面
    创建entry-confirm.php与entry.php页面
    =>entry-confirm.php

<?php
use yii\helpers\Html;
?>
<p>You have entered the following information:</p>
<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

=>entry.php

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'name') ?>
    <?= $form->field($model, 'email') ->label('My Email') ?>
    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>
<?php ActiveForm::end(); ?>

视图使用了一个作用强大的小部件
[[yii\widgets\ActiveForm|ActiveForm]] 去生成 HTML 表单。其中的
begin() 和 end()
分别用来渲染表单的发端和倒闭标签。在那八个点子之间选取了
[[yii\widgets\ActiveForm::field()|field()]] 方法去创制输入框。
yii2的前端渲染的写法有点类似jsp,个人感觉laravel的前端渲染框架要更为雅致。不过yii2的前端渲染与后端过滤协同,会分别对数码开展表明,那样在高速创设利用时会方便广大。

这一次就可是多的废话了,毕竟 深V 说
“你能无法深切点,再深远点…”

利用数据库

  • 填充测试数据

CREATE TABLE `country` (
  `code` CHAR(2) NOT NULL PRIMARY KEY,
  `name` CHAR(52) NOT NULL,
  `population` INT(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `country` VALUES ('AU','Australia',24016400);
INSERT INTO `country` VALUES ('BR','Brazil',205722000);
INSERT INTO `country` VALUES ('CA','Canada',35985751);
INSERT INTO `country` VALUES ('CN','China',1375210000);
INSERT INTO `country` VALUES ('DE','Germany',81459000);
INSERT INTO `country` VALUES ('FR','France',64513242);
INSERT INTO `country` VALUES ('GB','United Kingdom',65097000);
INSERT INTO `country` VALUES ('IN','India',1285400000);
INSERT INTO `country` VALUES ('RU','Russia',146519759);
INSERT INTO `country` VALUES ('US','United States',322976000);

依照官方文档的做法是间接运用sql语句去变通数据库,感觉并未laravel通过seed生成数据便宜,应该是八个框架的重头戏不相同啊。

  • 数据库连接配置
    修改config/db.php如下,写法与jdbc类似

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=yii2basic',
    'username' => 'root',
    'password' => '',
    'charset' => 'utf8',
];
  • 创建model
    创立一个持续自活动记录类的类 Country,把它座落
    models/Country.php文件,去代表和读取 country表的多少。

<?php
namespace app\models;
use yii\db\ActiveRecord;
class Country extends ActiveRecord
{
}

本条类使用了yii2的ActiveRecord,增添了数据库处理,那几个就与laravel中所介绍的model类一样了,然而yii2这几个事例并没有具体描述该类,而是径直留空,依照文档中的介绍是:Yii
就能依照类名去估量对应的数量表名。

  • 4858.com ,成立控制器
    新决定器名为 CountryController,并在里面创设一个 index 操作。

<?php
namespace app\controllers;
use yii\web\Controller;
use yii\data\Pagination;
use app\models\Country;
class CountryController extends Controller
{
    public function actionIndex()
    {
        $query = Country::find();
        $pagination = new Pagination([
            'defaultPageSize' => 5,
            'totalCount' => $query->count(),
        ]);
        $countries = $query->orderBy('name')
            ->offset($pagination->offset)
            ->limit($pagination->limit)
            ->all();
        return $this->render('index', [
            'countries' => $countries,
            'pagination' => $pagination,
        ]);
    }
}

不等框架ORM函数名与写法稍有例外,但功效上大题应该亦然。

  • 创办视图
    在 views 目录下先创立一个名为 country 的子目录。那几个目录存储所有由
    country 控制器渲染的视图。在 views/country 目录下开创一个名为
    index.php 的视图文件,内容如下:

<?php
use yii\helpers\Html;
use yii\widgets\LinkPager;
?>
<h1>Countries</h1>
<ul>
<?php foreach ($countries as $country): ?>
    <li>
        <?= Html::encode("{$country->name} ({$country->code})") ?>:
        <?= $country->population ?>
    </li>
<?php endforeach; ?>
</ul>
<?= LinkPager::widget(['pagination' => $pagination]) ?>

视图中运用 [[yii\widgets\LinkPager]]
去渲染从操作中传播的分页新闻。
yii2这边控制器与视图之间通过决定器名与视图的文书夹互相绑定,与laravel的控制器中指定视图文件路径稍有例外。

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

使用 Gii

  • 修改配置
    在 config/web.php
    文件添加可以访问gii与调节工具的ip,然后访问相应网页即可http://192.168.10.10:100/index.php?r=gii:

if (YII_ENV_DEV) {
    // configuration adjustments for 'dev' environment
    $config['bootstrap'][] = 'debug';
    $config['modules']['debug'] = [
        'class' => 'yii\debug\Module',
        'allowedIPs' => ['127.0.0.1', '::1','192.168.10.1'],
        // uncomment the following to add your IP if you are not connecting from localhost.
        //'allowedIPs' => ['127.0.0.1', '::1'],
    ];

    $config['bootstrap'][] = 'gii';
    $config['modules']['gii'] = [
        'class' => 'yii\gii\Module',
        'allowedIPs' => ['127.0.0.1', '::1','192.168.10.1'],
        // uncomment the following to add your IP if you are not connecting from localhost.
        //'allowedIPs' => ['127.0.0.1', '::1'],
    ];
}

yii2自带的调节工具与laravel的Debugbar
扩充包作用看似,但效果上就如多一些,可是那几个调试工具不可以在页面上转移大小,有点不便民。
Gii是一个代码生成器,功用尤其强有力,给本人有种点几下鼠标就能便捷创设利用的痛感。

入门以及怎么着使用 vueJS(对,没错。就是 入门以及哪些运用)

那就是说大家来合计一个题材,
学习一款框架。什么样的程度才总算入门,以及学习一门框架的方法方法。(每种人恐怕都不均等,然而大家仍然要总计一下)

从一个 素不相识的 框架 。比如事先的 JQ 的求学 进度应该是那样的。

在并未营造的基础上,先是引入那一个库,然后开头照着文档开始写 最简便易行的 DEMO
=》 尝试着把文档中牵线的半数以上的API 都自身写五回 =》
实际的门类中去行使发现坑 =》 化解遭遇的坑 =》最后在提高原理层面

此地我引进多个 做JQ 源码解析不错的 博客

分别是 艾伦 Aaron
、 ChokCoco

在通过大气年华去 去做 JQ 的源码解析,一方面可以提高你在 JS 语言
的驾驭,加深对 JS 语法、闭包、继承 等多地点的提拔,
其余一边也加重了您对 JQ 的知情。所以好处多多
4858.com 2

接轨,也会出JQ 源码分析的小说(希望站在 巨人的肩膀上得以看的更远)

欢迎访问 vuejs 汉语社区 ,

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

此间讲完了 我们耳熟能详的 JQ 那几个库的 学习曲线。那么大家发轫思索一下 Vue
那几个框架,应该怎么入手吧?

小结一个方式吧,任何一款框架的读书,一定是 一边手写 DEMO 一边 看文档 API
=》 参加打造 =》 项目应用 =》 发现坑 =》 查找 issues 解决坑

自然 这个环节中 发现坑 和 化解坑 的长河一定是忙绿的。
渡过了那个时期,剩下的就是手到擒来。
基本框架以内的题材,均可以去消除。4858.com 3

那就是说上边,我就介绍部分 入门级 API (指令 或然 方法)

END

1.1 关于 vueJS 系统自带常规指令的用法

1 : v-show

    <div v-show="true">
        this is true 
    </div>

原理: 类似我们在应用 JQ 时候的时候决定 DOM 呈现隐藏 的 display:none
/ block
因为在还并未看 Vue 的源码的前提下,大家能够透过 改变 属性值 来查看
View 层的转变
此间就是 动态的给相应的 Dom 添加了一个 style 的 display 的样式

2 : v-if (v-else)

    <div v-if="true">
        this is A ( true ) 
    </div>

    <div v-else>
        this is B ( fasle) 
    </div>

原理: 类似大家在行使 JQ 时候的时候 动态的 添加/删除 DOM

eg: var Dom = $(" <div title='香蕉'>香蕉</div >")  body.append(Dom)  /  Dom .remove()

熟知 JQ 的同班应该 很简单就足以查看到
其中的原理了。是或不是很粗略4858.com 4

3 : v-for

    <div>
        <ul>
            <li v-for='item in items'> 
                {{item.name}} 
                {{item.age}}
            </li>
        </ul>
    </div>

    new Vue({
        el: 'body',
        data: {
            items: [
                {name: 'zhangsan', age: 21},
                {name: 'lisi', age: 22},
                {name: 'wangwu', age: 23},
                {name: 'zhaoliu', age: 24}
            ]
        }
    })

注一: *** v-for 的 render 效果如下***

    <div>
        <ul>
            <li> zhangsan 21 </li>
            <li> lisi 22 </li>
            <li> wangwu 23 </li>
            <li> zhaoliu 24 </li>
        </ul>
    </div>

其一 v-for 假诺没有接触过 上篇小说中涉嫌过的 TP 那类MVC
框架开发的同班,只怕有些麻烦知晓一些。
那那里大家如故拿 JQ 的例子来说吧
在 JQ 开发中,大家平日会用 字符串 拼接的艺术来 消除 ajax 重临数据的
显示。 假若ajax再次来到一个数组的话,
俺们就会在回到的时候 用 for 循环 来 生成大家最终想假如 字符串 然后 再
append 到对应的 节点地方。
唯独在 vue 中就不存在 字符串拼接,那样望着 辣眼睛的代码 啦 是还是不是很舒畅(英文名:Jennifer)的感觉啊 4858.com 5

4 : v-bind

    <div>

    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA'
        }
    })

注一: ***v-bind 的 render 效果如下***

    <div>
        this is dataA
    </div>  

注二: v-bind 同样也足以平素 用 胡子标签替换

    <div>
         {{isA}} 
    </div>

那边大家一致用JQ 的例证 来解释 为何会是那样子的

在JQ 中一旦,大家必要动态的去显得一个 属性值的话, 大家先是 须求获取节点 $ =》 然后再生成 拼接之后的字符串 =》 然后再 append
到对应的节点地点 =》 属性值暴发变动 =》大家又需求改变一下
我们拼凑是字符串 =》 再 append 到相应的节点地方

只是在 Vue 中 就会不难很多。如上图。 当 data 对象中属性值暴发变动,vue
实例化过程会给其品质均添加 getter setter
方法去监听其值的变动,最终反应在视图上。根本不必要大家手动去改任陈菲西

5 : v-bind: class

    <div v-bind:class="{'active': isActive}">
         {{isA}} 
    </div>

    // 这里是css文件
    .active{
        color: red;
    }

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true
        }
    })

注一: ***v-bind:class 的 render 效果如下***

    <div class="active">
         this is dataA 
    </div>

注二: v-bind:class 同样也足以间接 用 : class 简写

    <div :class="{'active': isActive}">
         {{isA}} 
    </div>

此处是 动态的给节点 添加 / 删除 Class 样式。 在JQ 中大家普通是
先获取节点 $ =》 再 $.addClass(‘xxx’); => 删除的话
$.removeClass(‘xxx’)
哟,长日子的写 Vue 再让自身去写JQ 好痛苦啊啊啊啊啊
4858.com 6

6 : v-bind:style

>  注一: ***v-bind:style 的用法同 v-class  类似***

    <div v-bind:style="{ color: isColorA, fontSize: fontSize + 'px'}">
         this is dataA 
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20
        }
    })

注二: ***v-bind:style 的 render 效果如下***

    <div style="color: blue; font-size: 20px;">
         this is dataA 
    </div>

注三: v-bind:style 可以 简写如下

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
    </div>

此间是 动态的给节点 添加 / 删除 Class 或 style 样式。 在JQ
中大家常见是 先获取节点 $ =》 添加样式的话 $.css(‘height’: “20px”)
=> 删除样式 $.removeAttr(“style”)
难受。

7 : v-bind : href

>  注一: ***v-bind : href 的用法同 v-class  类似***

    <div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
        <a v-bind:href="hrefUrl"> this is a link </a>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20,
            hrefUrl: 'http://h5.runjiaoyu.com.cn'
        }
    })

 注二: ***v-bind : href 的 render 效果如下***

    <div style="color: blue; font-size: 20px;">
         this is dataA 
        <a href='http://h5.runjiaoyu.com.cn'></a>
    </div>

注三: ***v-bind : href 可以 简写如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
    </div>

注四: ***v-bind : href  同样也可以可以 简写如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
        <a href={{hrefUrl}}> this is a link </a>
    </div>

一如既往 当大家同JQ 去改变某个 a 标签的 href 的值的时候,
首先得到a标签节点 $ =》 改变它的值 $.attr(‘href’, ‘www.xxx.com’);
持续难熬。

8 : v-click

    <div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
        <a href={{hrefUrl}}> this is a link </a>
        <button v-click='toDo($index)'> click Me </button>
        <button v-click='nextToDo($event)'> click Me </button>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20,
            hrefUrl: 'http://h5.runjiaoyu.com.cn'
        },
        methods: {
            toDo: function() {
                // to do something
            },
            nextToDo: function(e) {
                console.log(e.target)
                // to do something else 
            }
        }
    })

注一: ***v-click   可以 简写如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
         this is dataA 
        <button @click='toDo'> click Me </button>
        <button @click='nextToDo'> click Me </button>       
    </div>

在 JQ 中大家 去给 节点绑定方法,首先肯定是收获节点 $ =》 然后
$.add伊芙ntsListener(‘click’, func) / $.on(‘click’, func)。
那类闭包写多了,代码万分难看,讲真。
不信你看看上面的 Vue
的代码。4858.com 7

1.1.2 关于 vueJS 、 avalon 、 Knockout 等 MVVM 标签渲染 原驾驭读

    var greeting = 'my name is $(name),age $(age)';
    var result = greeting.render({name:'XiaoMing',age:11});
    console.log(result); // my name is XiaoMing,age 11

咱俩提交一个 render 的章程 达成以上急需
代码如下:

String.prototype.render = function (obj) {
    var str = this, reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\$\\('+ v +'\\)', 'g');
        str = str.replace(reg, obj[v]);
    });

    return str;
}

var greeting = 'my name is $(name),age $(age)';
var result = greeting.render({name:'XiaoMing',age:11});
console.log(result); // my name is XiaoMing,age 11

最后再提一点 体积。 JQ 以后 是 100K 左右, Vue 最小 30K 左右。
Vue 看起来就如一个灵活的 小猴子呀。

此章节到此停止 文档已 归置 github

只怕这些时候又有同学要问了,卧槽,不是说好了要介绍 Vue
的入门么?4858.com 8

为啥你的入门里面,基本上都是讲的 用法什么的,对于自个儿这么些一无所知的
我的话很难知晓啊。

牢记Vue 小编 尤雨溪 曾经说过的一句话,假如 学习Vue
通过看文档都不大概学会,那就是 Vue
的错。4858.com 9

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有