目录
2.2、Namespace 'v-bind' is not bound
1、基本应用
1.1、文本绑定
<div id="app"> <!--<div id="app" v-once> 只加载一次-->
<p>{{ message }}</p>
</div>var data = {message: 'Test demo!'}
var vm = new Vue({
el: '#app',
data: data
})
vm.$data.message = "change..."
vue对象区分普通js对象
document.write(vm.$data === data)
document.write("<br>")
document.write(vm.$el === document.getElementById('app'))var vm = new Vue({
el: '#app',
data: {message: 'Test demo!'}
})
vm.message = "change..."
document.write(vm.$data.message === vm.message) true1.2、v-html（动态插入）
var vm = new Vue({
el: '#app',
data: {
message: 'Test demo!',
rawHtml: '<span style="color:red">this is red</span>'
}
})<div id="app">
<p>{{ message }}</p>
<p v-html="rawHtml"></p>
</div>1.3、v-bind（动态绑定，单向）
<div id="app">
<p>{{ message }}</p>
<div v-bind:class="color">test..</div><!--<div :class="color">test..</div> 缩写-->
</div>var vm = new Vue({
el: '#app',
data: {
message: 'Test demo!',
color: "red"
}
}).red {
color:red;
}1.4、v-model（动态绑定，双向）
<div id="app">
<input v-model.lazy.trim="msg1"/><!--lazy回车才改变，trim去首尾空串-->
<p>{{ msg1 }}</p>
<textarea v-model="msg2"></textarea>
<p>{{ msg2 }}</p>
<br>
<div>
<input type="checkbox" value="chk1" v-model="checkNames">
<label>chk1</label>
<input type="checkbox" value="chk2" v-model="checkNames">
<label>chk2</label>
<input type="checkbox" value="chk3" v-model="checkNames">
<label>chk3</label>
</div>
<p>{{ checkNames }}</p>
<div>
<input type="radio" value="rad1" v-model="pickNames">
<label>rad1</label>
<input type="radio" value="rad2" v-model="pickNames">
<label>rad2</label>
</div>
<p>{{ pickNames }}</p>
</div>var vm = new Vue({
el: '#app',
data: {
msg1: '',
msg2: '',
checkNames: [], 如果用字符串则绑定checked属性
pickNames: ''
}
})1.5、v-on和@
<div id="app">
<input v-model.lazy.trim="msg1"/><!--lazy回车才改变，trim去首尾空串-->
<p>{{ msg1 }}</p>
<textarea v-model="msg2"></textarea>
<p>{{ msg2 }}</p>
<br>
<button @click="btnClick">按钮</button><!--@是v-on的简写-->
</div>var vm = new Vue({
el: '#app',
data: {
msg1: '',
msg2: ''
},
methods: {
btnClick : function () {
alert(vm.msg1+' '+vm.msg2);
}
}
})1.6、组件
<div id="app">
<button-counter var1="标题1:" var2="结束1" @clickchild="clickFather">
<p>插入的Html内容</p><!--需要配置插槽标签 slot-->
</button-counter>
<button-counter var1="标题2:" var2="结束2"></button-counter>
<!--局部组件-->
<demo-name></demo-name>
</div>Vue.component('button-counter', {
props: ['var1', 'var2'],
组件中的data必须是函数
data: function () {
return {
count: 0
}
},
模板中的元素必须要有根元素包裹
<slot></slot>为插槽，可以插入html内容
template: '<div><button v-on:click="addCount">【{{var1}}】You clicked me {{ count }} times.【{{var2}}】</button><slot></slot></div>',
methods: {
addCount: function () {
this.count++;
触发当前实例上的事件, 可带多个参数
注意Dom标签事件只能小写 clickchild
this.$emit('clickchild', "总计：", this.count);
}
}
})
new Vue({
el: '#app',
methods: {
clickFather: function (v1, v2) {
alert(v1 + v2);
}
},
局部组件，组件名称只支持全小写和中划线
components: {
'demo-name': {
template: '<h2>局部组件demo-name</h2>'
}
}
})1.7、axios
main.js 添加
import axios from 'axios'
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;引用文件添加
import axios from "axios"
axios({
method: 'get',
url: '',
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
})1.8、promise
created() {
then里面使用返回结果
this.getStockHistory().then(result => {
this.historyData = result
})
},
methods: {
getStockHistory: function () {
新建promise对象，resolve处理返回结果
return new Promise(function (resolve) {
axios({
method: 'get',
url: '/api/service/chddata.html?code=1000001&start=20200101&end=20200401',
responseType: 'arraybuffer'
}).then(response => {
const blob = new Blob([response.data])
const reader = new FileReader()
reader.onload = function () {
console.log(this.result)
处理返回结果
resolve(this.result)
}
reader.readAsText(blob, 'gbk')
}).catch(error => {
console.log(error)
})
})
}
}1.9、watch
数据的监听
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
function(){
vm.counter += 20;
},10000
);1.10、v-if和v-show
v-show 隐藏 是display:'none'
v-if 隐藏是 visibility:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{msg}}</p>
<h1 v-show="see">{{msg}}</h1>
<h1 v-if="!see">{{msg}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue',
see:true
}
})
</script>
</body>
</html>2、其他问题
2.1、Unresolved type Vue
下载vue.js，引入项目
2.2、Namespace 'v-bind' is not bound
2.3、搭建vue-cli环境
安装NodeJS（下载地址）：https://nodejs.org/en/download/
npm（Node Package Manager）包管理器
配置包缓存目录
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”然后修改环境变量到node_global
由于网络原因，安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli
cnpm install -g @vue/cli安装webpack（是JavaScript打包器module bundler）
cnpm install -g webpack启动vue-cli
vue ui
创建一个项目
2.4、idea运行vue项目（webstorm）
2.5、vue-cli3创建的项目资源文件路径问题
vue-cli3新建项目省去了很多配置文件
根路径添加文件vue.config.js
module.exports = {
publicPath: './',
}重新打包即可
2.6、vue-cli3配置跨域
同 15 根路径添加文件vue.config.js
module.exports = {
//publicPath: './',
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: {//配置跨域
'/api': {
target: 'http://quotes.money.163.com',//这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true,//允许跨域
pathRewrite: {
'^/api': ''
}
}
}
}
}
2.7、axios接收csv文件及gbk编码处理
axios({
method: 'get',
url: '/api/service/chddata.html?code=1000001&start=20200101&end=20200401',
responseType: 'arraybuffer'// 或者 blob
}).then(response => {
const blob = new Blob([response.data])
const reader = new FileReader()
reader.onload = function () {
console.log(this.result)
}
reader.readAsText(blob, 'gbk')
}).catch(error => {
console.log(error)
})
扫一扫
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
