Vue
现在开始学Vue了，问了同学，他说这个东西的内容很多。然后就跟着尚硅谷来学Vue了
用的是visual studio code，所以又下了一个visual。
首先时下载Vue，我再Vue3的官网是没有看到下载的，所以是跑到Vue2去下载的
将它自动跳出的警告去掉。分别先是在默认浏览器的扩展中安装了一个vue.js devtools插件
然后是在代码中将
<script type="text/javascript">
Vue.config.productionTip=false //阻止vue在启动时生成生产提示
</script>
写入
1.想让vue工作，就必须创建一个vue实例，且要传入一个配置文件
2.root容器里的代码依然符合html的规范，只不过混入了一些特俗的Vue语法
3.root容器里的代码被成为【Vue模板】
4.Vue实例和容器时一一对应的
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦打他中的数据发生改变，那么页面中用到该数据的地方也会自动更新
Vue的模板语法
Vue模板语法又两大类：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js的表达式，且可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件......）。
举例：v-bind：href="xxx" 或 简写为 ：href="xxx"，xxx同样是js的表达式
且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-????,此处我们只是拿v-bind举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板语法</title><script type="text/javascript" src="../js/vue.js"></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><h3>你好,{{name}}</h3><hr><h1>指令语法</h1><a v-bind:href="school.url">点我去{{school.name}}学习</a></div>
</body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:"#root",data:{name:'jack',school:{name:'尚硅谷',url:'http://www.atguigu.com'}}})</script></html>Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都是应用在表单元素上面（如：input，select等）
2.v-model：value 可以简写为v-model，因为v-model默认收集的就是value值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据绑定</title><script type="text/javascript" src="../js/vue.js"></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>双向数据绑定: <input type="text" v-model:value="name"><br> --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><br>双向数据绑定: <input type="text" v-model="name"><br><!-- 以下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body>
<script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:"#root",data:{name:'cy'}})</script></html>data和el的两种写法
1.el的两种写法
(1).new Vue式配置el的属性
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2.data有两种写法
(1)对象式
(2)函数式
3.一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>el和data的两种写法</title><script type="text/javascript" src="../js/vue.js"></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></body>
<script type="text/javascript">Vue.config.productionTip=false//el的两种写法// const v= new Vue({// //el:"#root", 第一种写法// data:{// name:'尚硅谷'// }// })// console.log(v)// v.$mount('#root') //第二种写法//data的两种写法new Vue({el:'#root',//data的第一种写法:对象式// data:{// name:'尚硅谷'// }//data的第二种写法data:function(){return{name:'尚硅谷'}}})</script></html>MVVM模型：
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>理解MVVM</title><script type="text/javascript" src="../js/vue.js"></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>学校地址：{{adress}}</h1></div><script type="text/javascript">Vue.config.productionTip=false //阻止vue在启动时生成生产提示const vm=new Vue({el:"#root",data:{name:'尚硅谷',adress:'北京'}})console.log(vm)</script>
</body>
</html>Object.defineproperty
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>回顾Object.defineproperty方法</title><script type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">let number=18let person={name:'张三',sex:'男'}Object.defineProperty(person,'age',{// value:18, //数据的直传//enumerable:true //控制属性是否可以枚举，默认值是false//writable:true //控制属性是否可以被修改 默认值是false//configurable:true //控制属性是否可以被删除，默认值是false//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值get:function(){console.log('有人读取age属性')return number},//当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值set(value){console.log('有人修改了age属性，且值是',value)number=value}})</script>
</body>
</html>
![P8271 [USACO22OPEN] COW Operations S 奶牛操作](http://pic.xiahunao.cn/P8271 [USACO22OPEN] COW Operations S 奶牛操作)
