vue基础
在html文件中导入vue,学习基础的时候可以通过在线导入，如果对版本没有要求的可以任意选择一个导入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>vue2
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>vue3
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>基本语法
格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="message">正确</h1>
<h1 v-else>错误</h1>
</div>
</body>
<script>
var vm = new Vue({
<!-- el为绑定的组件-->
el:"#app",
<!-- 存储数据-->
data:{
message : false
},
<!-- 方法-->
methods: {
one: function() {
alert(this.message)
}
}
})
</script>
</html>数据显示
<!-- 页面-->
<h1>{{message}}</h1>
<!-- 数据-->
data:{
message : "hello"
}在页面中以h1格式显示hello
if-else
<!-- 页面-->
<h1 v-if="message">正确</h1>
<h1 v-else>错误</h1>
<!-- 数据-->
data:{
message : false
}如果message为true则显示正确，如果为false则显示错误
v-for
输出方式有两种，一种是数组，一种是对象都可以进行遍历
数组方式
<!-- 页面-->
<li v-for="item in message">
{{item}}
</li>
<!-- 数据-->
data: {
message: ["one","tow","three"],
}对象方式1
<!-- 页面-->
<li v-for="item in message">
{{item.title}}
</li>
<!-- 数据-->
message: [{title: "北京"},{title: "上海"},{title: "广州"}]对象方式2,参数位置为 值，键，下标
<!-- 页面-->
<li v-for="(value, key, index) in message">
{{key}}----
{{value}}----
{{index}}
</li>
<!-- 数据-->
message: {
"a": "shanghai",
"b": "guangzhou",
"c": "shenzhen"
}v-on可以通过绑定的方式实现方法调用，注意此处为methods不是method
<!-- 页面-->
<button v-on:click="one">点击</button>
<!-- 函数-->
methods: {
one: function () {
alert(this.message)
}
}v-model
<input type="text" v-model="message"></input>
<h1>{{message}}</h1>
</div>如果使用v-model会忽略所有的value，checked，selected初始值，以vue实例的数据作为数据来源，也就是说如果在单选框或者复选框添加了默认选中某个选项，如果此时绑定了model则默认选中会失效
如下情况默认选中会失效
<select v-model="message">
<option >a</option>
<option selected>b</option>
<option>c</option>
</select>
<input type="radio" name="sex" value="男" checked v-model="message">
<input type="radio" name="sex" value="女" v-model="message">v-bind
v-bind也是进行绑定，不过与v-model的不同就是v-bind只能从将数据从model流向view，无法从view流向model，也就是说v-model是双向绑定，v-bind是单向绑定
自定义component组件
<!-- 页面-->
<div id="app">
<ww v-for="item in message1" v-bind:wwd="item"></ww>
<oo v-bind:ood="message"></oo>
</div>
// 数据
data: {
message : "hello",
message1 : ["java","windows","linux"]
}网络通信axios
首先需要导入axios库，有两个库，其中一个版本为迷你版本，导入其中一个就可以了
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>创建钩子函数，主要用来异步请求数据的，以及页面展示
<!-- 页面-->
<h1>{{info.name}}</h1>
<a v-bind:herf="info.url">点击超链接</a>
<!-- 数据-->
data() {
return {
info: {
name: null,
address: null,
url: null,
doc: {
sex: null,
age: null
}
}
}
},
mounted(){
axios.get("data.json").then(response=>(
this.info = response.data
))
}此处需要注意axios.get中需要存放链接，我们创建了一个data()函数，函数内的格式必须与请求后返回格式一致，与data属性的区别除了格式不同之外，主要是作用域不同，可以避免数据的污染
创建数据源（仅测试使用，实际工作中是通过链接请求实现数据获取的）
{
"name": "admin",
"address": "beijing",
"url": "www.baidu.com",
"doc": {
"sex": "男",
"age": 22
}
}此处我们是创建了一个json文本用来测试，json文本中的数据格式如下，名称为data.json，与页面同级目录，如果目录不同级，则需要加入相对路径
计算属性
可以通过计算得到属性，结果会返回在内存中，不会重复的进行计算，只有在刷新页面的时候进行计算，如果方法比较多的情况下可以很大的节省计算开销，提高效率,创建computed，调用的时候通过属性方式调用，而方法则需要通过方法的方式来进行调用
<!-- 页面-->
<h1>date: {{date()}}</h1>
<h1>date: {{date1}}</h1>
<!-- 数据-->
computed:{
date1:function() {
return Date.now();
}
},
methods:{
date:function() {
return Date.now();
}
},
插槽slot
插槽起到占位符的，如果我们将一个组件放到页面，如果需要展示某些内容，有可能没有作用，此时插槽就可以帮我们解决
例如
<!-- 页面-->
<oo>你好</oo>
<!-- 组件-->
Vue.component("oo",{
template: "<h3>hello</h3>"
})此时的结果是只会显示hell，而你好则不会显示，如果使用插槽则会都显示出来
<!--页面-->
<oo>
<ww slot="kkk" v-bind:wws="title"></ww>
</oo>
<!--数据-->
Vue.component("oo",{
props:[''],
template: "<div>\
<slot name='kkk'></slot>\
<h3>hello</h3>\
<slot name='oos'></slot>\
</div>"
})
Vue.component("ww",{
props:['wws'],
template: "<li>{{wws}}</li>"
})
var vm = new Vue({
el: "#app",
// 数据
data:{
title:"员工",
name:["张三","李四","王五"]
}
})此处不太好理解，简化说下渲染流程
<oo>
<h1 slot="kkk">大海</h1>
</oo>将页面改为如上，则会显示大海 hello，在oo中添加了标签h1，标签的slot属性绑定了oo的哪个插槽，则会在oo中的哪个插槽位置插入此标签，并显示出来，这样理解就比较容易了，当我们在oo中插入ww组件，使用此组件slot属性绑定oo的哪个插槽，则会在oo的哪个位置显示此组件的内容，剩下的就是使用v-bind将数据绑定到ww标签，这样就可以全部显示出来了
自定义内容事件分发
这里很好理解，只是比较绕，我们的目的是在组件内操作vue实例内的数据
要将自定义组件内的事件绑定自定义组件内的方法
Vue.component("ww",{
props: ['wws'],
template: "<li>{{wws}}<button v-on:click='remove()'>删除</button></li>",
methods: {
remove: function(index) {
this.$emit("remove",index)
}
}
})将自定义组件的方法绑定实例内的方法
<!-- 页面-->
<div id="app">
<ww v-for="(item, index) in name" v-bind:wws="item" v-on:remove="remove1(index)"></ww>
</div>实例内的方法
var vm = new Vue({
el: "#app",
data: {
name: ["张三","李四","王五",]
},
methods : {
remove1: function(index) {
this.name.splice(index,1)
}
}
})如果组件内又多个事件，只需要将绑定添加到2步骤中即可
<!-- 页面-->
<div id="app">
<ww v-for="(item, index) in name" v-bind:wws="item" v-on:add="add1(index)" v-on:remove="remove1(index)"></ww>
</div>vue项目的创建
node.js环境，从官网中下载
https://nodejs.org/zh-cn/环境检测，检查node版本和npm版本，都没有问题了可以创建vue项目了
node -v
npm -v配置国内资源库
#通过此命令查看资源库地址，如果是国外的，在下载的时候灰非常慢，也可以通过设置国内的资源库地址
npm get registry
#通过此命令设置国内的资源库地址
npm config set registry http://registry.npm.taobao.org/安装vue-cli脚手架
npm install -g vue-cli
#查看vue版本，确认vue安装成功
vue -V完成以后创建vue项目文件夹，在此文件夹下打开cmd，创建名为vuedemo的项目
vue init webpack vuedemo创建完成以后会有两个命令提示，按照命令提示启动项目，有些版本使用的是npm run server，如果不确定的情况下可以去项目的package.json文件中查找scripts下查看启动命令
cd de
npm run dev
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
