今天完成的事情：
学习vue
Vue.js 是什么
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性
Vue.js 的安装方法
独立版本
可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用
使用CDN方法
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
NPM方法
1.安装node.js(做任务5时已完成)
2. 安装cnpm：在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
3.安装vue-cli 脚手架构建工具:
在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
是否安装成功：vue -V
webpack的版本查询：webpack -v
声明式渲染
采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="app">
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
条件与循环
控制切换一个元素是否显示也相当简单
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
处理用户输入
用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
写登录页面：
<div class="page">
<div class="login">
<p class="title">后台登录</p>
<div class="user">
<img src="./images/src/登陆_01.png">
<input type="text" class="username" placeholder="用户名" id="user">
</div>
<div class="pwd">
<img src="./images/src/登陆_02.png">
<input type="password" class="password" placeholder="密码" id="pass">
</div>
<p id="hide"></p>
<button id="btn">登 录</button>
</div>
</div>
ajax：
$('#btn').click(function () {
var username = $('#user').val();
var password = $('#pass').val();
$.ajax({
method: 'POST',
url: '/carrots-admin-ajax/a/login',
data: {
name: username,
pwd: password
},
success: function (data) {
data = JSON.parse(data);
console.log(data);
if (data.message === 'success') {
location.href = 'http://dev.admin.carrots.ptteng.com'
} else {
$('#hide').append(data.message);
}
}
});
});
明天计划：
做任务7
返回列表
评论