vue.js的学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue"></script>
<title>vue练习</title>
</head>
<body>
<div id="lx">
<a href="#">{{message}}</a>
<!--只执行一次插值，数据改变不更新-->
<p v-once>{{message}}</p>
<!--计算属性-->
<p>{{reversedMessage}}</p>
<p v-html="yhtml"></p>
<p>{{yhtml}}</p>
<!--DOM属性绑定-->
<p><span v-bind:title="message">属性绑定</span></p>
<!--属性绑定提供完全的js表达式支持-->
<p><span v-bind:title="message + 1212">属性绑定</span></p>
<!--if判断(可以使用！)-->
<p v-if="!vuif">现在看到了</p>
<!--for循环-->
<ul>
<li v-for="item in vulist">{{item}}</li>
</ul>
<ol>
<li v-for="item in vulists">{{item.text}}</li>
</ol>
<!--使用v-on绑定DOM事件监听-->
<button v-on:click="reverseMessage">逆转消息事件</button>
<!--v-model实现输入框双向绑定-->
<input type="text" v-model="message">
<p><todo-item v-for="item in vulists" v-bind:todo="item" v-bind:key="item.id"></todo-item> </p>
<p>{{vuobj.a}}</p>
<form v-on:submit.prevent="onSubmit">
<input type="submit">
</form>
</div>
</body>
<script> //数据接收
var data = {
id: 1,
message: 'hello vue!',
yhtml:'<a>输出原HTML</a>',
vuif: false ,
vulist: [
'a','b','c'
],
vulists: [
{text: '学习开始'},
{text: '学习中。。。'},
{text: '学习结束'}
],
vuobj:{
a:'a1',
b:'a2'
}
}
//组件化注意是顺序
Vue.component('todo-item',{
props: ['todo'],//类似于一个自定义属性
template: '<li>{{todo.text}}</li>'
});
//vue初始化
var app = new Vue({
//绑定的元素
el:'#lx',
//数据
data:data,
//方法
methods:{
reverseMessage: function(){
this.message = this.message.split('').reverse().join('');
},
onSubmit: function(){
console.log('submit');
return false;
}
},
//计算属性(防止模板逻辑过重且难以维护)
computed:{
reversedMessage: function(){
return this.message.split('').reverse().join('');
}
},
//数据的监听
watch: {
//在app.message改变是触发
message: function(val,oldval){
console.log('new: %s, old: %s', val, oldval);
}
},
//实例创建之后触发
created: function(){
console.log('message is ' + this.message);
}
}); </script> </html>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
Get 请求：
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('请求失败处理'); });
post 请求：
this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); });
VUE安装：使用vue脚手架
vue-cli3的安装：
npm install -g @vue/cli 安装之后，就可以在命令行中访问 vue 命令。
创建项目两种项目：
1、vue create 文件英文名
2、图像化界面创建：
vue ui会打开浏览器窗口
Vue-cli3 项目配置 Vue.config.js
视频学习：http://www.bjsxt.com/down/9193.html
只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// proxy: {
// // change xxx-api/login => mock/login
// // detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API]: {
// target: `http://127.0.0.1:${port}/mock`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// }
// },
// after: require('./mock/mock-server.js')
},
main.js页面不使用mock；也可以带着，这里不影响；
2、接口的使用 src/utils/request.js修改 配置axios
修改返回数据的结果判断
3、注意本地使用的sockjs报错的原因，可能是因为本地其他项目使用过
比如vscode右键页面的原因
vue.js的学习的更多相关文章
- vue.js 初步学习
跟着b站上的视频来学 首先什么是vue.js? 跟着b站上视频来学:(oﾟvﾟ)ノ <!DOCTYPE html> <html lang="en"> < ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- daemon_init函数：调用该函数把普通进程转变为守护进程
#include <unistd.h> #include <syslog.h> #include <fcntl.h> #include <signal.h&g ...
- [译]使用Command模式和MediatR简化你的控制器
原文 你希望保持你的controller足够简单. 你的controller越来越臃肿,你听说command模式是一个给controller瘦身的解决方案. 但是你不知道command模式是否适合你的 ...
- 深度学习 ——style reconstruction
多层神经网络的实质就是为了找出更复杂,更内在的features...图像的style, how to describe, impossible! 但是人眼却可以分辨. (参考论文 A Neural a ...
- 查看 Centos 7 的MAC 地址
查看 Centos 7 的 MAC 地址 ens*** 网卡名称# cat /sys/class/net/eno16777736/address 查看内核版本 uname -a 查看系统版本 ca ...
- aabb碰撞检测
在做矩形重叠判断时 要判断A矩形的最大X>B矩形的最小X,A最大Y<小于B最小Y and 要判断B矩形的最大X>A矩形的最小X,B最大Y<小于A最小Y 一套规则,用2遍,很神奇 ...
- xgboost安装 win10 64位 annaconda
重点参考三个网站: https://www.ibm.com/developerworks/community/blogs/jfp/entry/Installing_XGBoost_For_Anacon ...
- python的sys.args使用
一.sys 模块 sys是Python的一个「标准库」,也就是官方出的「模块」,是「System」的简写,封装了一些系统的信息和接口. 官方的文档参考:https://docs.python.org/ ...
- A - Brackets POJ - 2955 （区间DP模板题）
题目链接:https://cn.vjudge.net/contest/276243#problem/A 题目大意:给你一个字符串,让你求出字符串的最长匹配子串. 具体思路:三个for循环暴力,对于一个 ...
- 传统javaweb 改成 Maven项目
1. 项目右键-- Configure --Convert to Maven Project 后可以生成maven结构,多了红色框的 <project xmlns="http:/ ...
- linux 日志管理