提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
vue2和vue3结合
提示：以下是本篇文章正文内容，下面案例可供参考
一、vue基础
1.什么是vue
它是一套用于构建用户界面的渐进式JavaScript框架（渐进式说的是可以自底向上逐层的应用）
2.谁开发的
尤雨溪（2014年vue正式对外发布了，版本号为0.8.0，Taylor otwell讲自己在学vue）
后起之秀，生态完善，已然成为国内前端工程师必备技能
3.vue的特点
（1）采用组件化模式，提高代码复用率、且让代码更好维护
（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率
（3）使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
4.学习Vue之前要掌握的JavaScript基础知识
Es6语法规范，Es6模块化，包管理器，原型、原型链，数组常用方法，axios，promise
5. 安装vue
因为我电脑里有Hibuder X 所以就用这个来写了（可以参考vue.js官网里的教程进行安装）
6.hello小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初识vue</title>
<!--引入vue-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器中的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vues实例和容器是一一对应的
5.真实开发中只有一个Vue实例，并且会配合组件一起使用
6.{{xxx}}中的xxx要挟js表达式，且xxx可以自动读到data中的所有属性
7.一旦data中数据发生更改，那么模板中用到该数据的地方也会自动更新
-->
<!--准备好一个容器-->
<div id="root">
<h1>hello {{name.toUpperCase()}},{{addrss}}</h1>//通过插值，将data中的值插入
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//创建Vue实例，想用Vue就要使用这个
new Vue({ //只传一个对象，为配置对象
el: '#root', //el是element，值定当前容器为哪个容器服务，值通常为选择器字符串
data: { //data中存储数据，数据供el中的容器使用，值暂时想写成一个对象
name: 'Vue123',
addrss:'北京'
}
})
</script>
</body>
</html>
注：容器和vue实例一一对应
{{}}中必须写成js中的表达式（一个表达式会生成一个值，可以放在任何需要值的地方，例如：a变量，a+b，.demo（1）,三元表达式)
7.模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
<script type="text/javascript" src="js/vue.js" charset="utf-8">
</script>
</head>
<body>
<!--
vue模板语法有两大类：
1.插值语法
功能：解析标签体中的内容
写法：{{xxx}},中的xxx值js表达式，且可以直接读到data中的所有属性
2.指令语法
功能：解析标签属性，标签体内容，绑定事件等
写法：v-bind:href="xxx" 或简写成 :href="xxx",xxx是js表达式，且可以直接读到data中的所有属性
备注：vue中有很多指令，形式都是v-???,此处只是用v-bind举例
-->
<div id="root">
<h1>插值语句</h1><!--通过插值，将data中的值插入-->
<h3>你好，{{name}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
<!-- v-bind: ===>简写为:-->
<a :href="school.url">点我去{{school.name}}学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//创建Vue实例，想用Vue就要使用这个
new Vue({ //只传一个对象，为配置对象
el: '#root', //el是element，值定当前容器为哪个容器服务，值通常为选择器字符串
data: { //data中存储数据，数据供el中的容器使用，值暂时想写成一个对象
name: 'jack',
school:{
name:'尚硅谷',
url:'http:www.atguigu.com'
}
}
})
</script>
</body>
</html>
8.数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据绑定</title>
<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<!--
Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面
2.双向绑定（v-model）：数据补技能从data流向页面，还可以从页面流向data
备注：1.双向绑定一般都应用于表单元素中（如input，select中）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value的值
-->
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name" ><br />
<!--v-model只能用在表单类元素（输入元素）上-->
双向数据绑定:<input type="text" v-model:value="name" />
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
9.el和data的两种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>el与data的两种写法</title>
<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<!--
data与el 的两种写法：
1.el的两种写法：
（1）.new Vue时候配置el属性
（2）先创建Vue实例，随后再通过vm.$mount('root')指定el的值
2.data有两种写法
（1）对象式
（2）函数式
3.由Vue管理的函数，不能写成箭头式，写成箭头式this的就不是Vue实例了
-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
const v=new Vue({
// el:'#root',//el的第一种写法
data:{//data的第一种写法：对象式
name:'尚硅谷'
},
//data的第二种写法：函数式（组件时必须用这种，不然会报错）
data:function(){
return{
name:'尚硅谷'
}
}
})
console.log(v)
v.$mount('#root')//el的第二种写法，用这个也可以指定容器，这种更为灵活
</script>
</body>
</html>
10.MVVM模
1.M：模型（Model）：对应data中数据
2.V:视图（View）：模板
3.VM：视图模型（ViewModel）：Vue实例对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MVVM模型</title>
<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<!--
MVVM模型：
1.M：模型（Model）：对应data中数据
2.V:视图（View）：模板
3.VM：视图模型（ViewModel）：Vue实例对象
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.VM身上所有的属性 及 vue原型上的所有属性，在Vue模板中度可以直接使用
-->
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{addrss}}</h1>
<h1>测试1：{{$options}}</h1>
<h1>测试2:{{_c}}</h1>
<h1>测试3：{{1+1}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
addrss:'北京'
}
})
console.log(vm)
</script>
</body>
</html>11.数据代理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>什么是数据代理</title>
</head>
<body>
<!--数据代理：通过一个对象代理另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
let obj={x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x=value
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回顾Object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let number=18
let person={
name:'张三',
sex:'男',
// age:18
}
//添加的属性，不能枚举（不能遍历，便利时没有）
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true,//控制属性是否可以枚举，默认为false
// witrable:true,//控制属性是否可以被修改，默认值为false
// configable:true//控制属性是否可以被删除，默认值为false
get:function(){//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
return number
},
set(){//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到具体修改的值
number=value
}
})
console.log(person)
</script>
</body>
</html>
1127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
