<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1.引入Vue.js--><script src="1.vue.js"></script>
</head>
<body><script type="text/javascript">Vue.config.productionTip=false//阻止Vue在启动时 生成生产提示
</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 1.引入Vue.js--><script src="1.vue.js"></script>
</head>
<body><!--2.准备好一个容器-->
<div id="root"><!-- 使用插值语法：插入一个值 两组花括号--><h1>hello {{name}} </h1>
</div><script>Vue.config.productionTip=false;//设置关闭生产者提示// 全局多了Vue这个构造函数 因此可以 使用new去用const i=new Vue({el:"#root", //对象第一个属性：匹配容器和实例 el用于指定当前vue实例为那个容器服务 值通常为css选择器字符串// el:document.getElementById("root")//也可以这样子data:{// 在来个对象 对象里面可以存任意数据类型的对象/* 因此data中用来存储数据 数据提供给data使用* 值 我们先暂时写成对象的形式 {}* * */name:'计算机科学与技术'}})//创建Vue实例 参数传递一个 叫做配置对象</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- Vue2.0练习--><!-- 1.先引入Vue文件--><script src="../1.Vue教程/1.vue.js"></script></head>
<body><!--2.准备一个容器 注意空格数据需要使用插值语法-->
<h1 id="root">你好 {{data}} </h1><!--3.准备script-->
<script><!-- 生成一个vue实例 构造函数里面需要传递参数 只有一个参数 叫做配置对象-->let vue = new Vue({el:"#root",//注意在js中 对象值之间使用逗号连接 注意这里只能是el 按照教程来// 接着书写数据 因为数据是要放在标签中显示的 因此最好使用对象data:{name: "计算机科学与技术"}});</script></body>
</html>
1.创建一个Vue实例 传递一个配置对象
2.root容器中的代码依然符合html代码规范 只不过混入一些特殊的Vue
3.root容器代码称为Vue模板
4.Vue的实例和容器是一一对应的
5.在开发中 只有一个Vue实例 并且配合着组件一起使用
6.{{XXX}} XXX是js中语句 对象.属性 直接写对象<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../1.Vue教程/1.vue.js"></script></head>
<body><h1 class="root">你好 ！{{name}} {{address}} {{day}}</h1><script>new Vue({el:".root",data: {name: "计算机科学与技术",address: "云南 昆明",day: "星期一！"}})</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../1.Vue教程/1.vue.js"></script></head>
<body><h1 class="root">你好 ！{{name.name1}} {{address}} {{day.age}}</h1><script>new Vue({el:".root",data: {name: {name1:"无邪"},address: "云南 昆明",day: {age:18},}})</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
<!--1.引入Vue文件--><script src="../1.Vue教程/1.vue.js"></script></head>
<body><!--准备一个容器-->
<div id="root"><h1>插值语法</h1><h2>你好 {{data}} {{data}} </h2><hr><h1>指令语法</h1>
<!-- 把跳转地址写死了 因此使用指令语法！-->
<!-- <a href="www.baidu.com">进入</a>--><!-- v-bind: 可以动态指定属性--><a v-bind:href="url" v-bind:x="dta()">进入</a><!--v-bind:X 为X动态绑定 Vue实例中的方法或属性对象 使用v-bind会把标签属性的值变为js语句 当做js中的语句来执行--></div><script><!-- 创建一个Vue实例-->new Vue({el:"#root",data:{name:"无邪",url:"www.baidu.com",dta(){console.log("你好！")}}})/* Vue模板语法有两大类：--1.插值语法：功能：用于解析 标签体内容写法 {{xxx}}} xxx是js的表达式 且可以直接读取到data中的所有属性
* --2.指令语法：
* 功能：用于解析标签 包括 标签属性 标签体内容 绑定事件...v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写为js表达式
* 且可以直接读取到data中的所有属性备注：Vue中有很多的指令 且形式都是： v-???
*
*
*
*
* */</script></body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>数据</title><script src="1.vue.js"></script></head>
<body><div id="root"><!-- 使用v-bin 就是把vue实例中的data对象 中的name语句赋值给valuev-bind中最大的特点的就是单向数据绑定 从输入框中修改数据在控制台里面不会出现 从控制台输入则不会 这就是单向数据绑定使用v-model 就是把vue实例中的data对象 中的name语句赋值给valuev-model中最大的特点的就是双向数据绑定 从输入框中修改数据在控制台里面会出现 从控制台输入也会修改 这就是双向数据绑定注意：v-model 只能适用于表单类的标签 v-model就是针对 value属性操作
-->单向数据绑定 <input type="text" v-bind:value="name"> <br>
<!-- 双向数据绑定 <input type="text" v-model:value="name"> <br>--><!-- 采用简写属性-->双向数据绑定 <input type="text" v-model="name"> <br>
</div><script><!-- 创建一个VUe实例-->new Vue({el:"#root",data:{name:"计算机科学与技术学院"}})
/*
* 1.单向数据绑定- v-bind 数据只能从data流向页面
* 2.双向绑定 v-model 数据不仅能从data流向页面 还可以从页面流向data
* 注意：
* 1.双向绑定一般应用在表单类因素上 input select上
* 2.v-model:value 可以简写为 v-model 因为v-model默认收集的就是value
*
*
*
*
*
*
*
*
*
*
* */</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="1.vue.js"></script></head>
<body>
<div id="root"><h1>{{name}}</h1>
</div><script>/*let vue = new Vue({// el:"#root", 第一种写法data:{name:"计算机"}})
*///第二种写法 把vue实例挂载到id属性为root的容器上// v.$mount("#root")//来个定时器 1秒后执行回调函数里面的代码/* setTimeout(()=>{v.$mount("#root")},1000)*//* console.log(vue);*/new Vue({el:"#root",/* data的第一种写法： data:{name:"计算机"}*/// data的第二种写法：函数式/* data:function () {return{name:'计算机'}}
*/data(){return{name:"计算机"}}})/*
* 1.el有两种写法
* --1.new Vue的时候 配置el属性
* --2.先创建Vue实例 随后在通过vm.$mount('#root')指定el属性
* 2.data的两种写法：
* --1.对象式
* --2.函数式
*
* 3.注意：由Vue管理的函数 一定不要书写箭头函数 一旦写了箭头函数 this就不再是Vue实例了 而是Window
*
*
*
*
*
*
*
*
*
* */</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MVVM实例</title><!-- 1.引入vue文件--><script src="1.vue.js"></script>
</head>
<body>
<div id="root"><h1>学校名称：{{name}}</h1><h1>地址：{{address}} {{$options}}</h1>
</div><script>/* MVVM模型：* 1.M(Model) data中的诗句* 2.V：视图(View) 模板代码* 3.VM 视图模型（ViewModel） Vue实例* * 1.data中的诗句最终也出现在了VM身上* 2.vm身上的所有的属性 及vue原型上所有的属性 在vue模板中都可以直接使用* * * */const vm=new Vue({el:"#root",data:{name:"大学",address:"云南",a:12}})console.log(vm)
</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据代理</title>
</head>
<body><script>let person={name:"吴邪",sex:'男',}Object.defineProperty(person,'age',{/* value:18,enumerable:true,//可列举 控制属性是否可以枚举 默认值为FALSEwritable:true,//控制属性是否能被修改 默认值为falseconfigurable:true,//控制属性是否能够删除*/get:function () {// 当有人读取person中的age属性时 get函数就会被调用 且返回值就是age的值return '计算机科学'},set(value){// 当有人修改person的age属性时 set函数就会被调用 且会受到=修改掉的具体值}})//第一个参数是要添加的对象 第二个是要添加对象的属性名 第三个是配置项console.log(person)</script></body>
</html>
数据代理：通过一个对象对另一个对象中属性的操作 读/写 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据代理</title>
</head>
<body><script>let obj1={x:100}let obj2={y:200}// 通过修改obj2；来修改obj1Object.defineProperty(obj2,'x',{get(){return obj1.x},set(value){
obj1.x=valueconsole.log()}})// 通过obj2来改变obj1的值</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="1.vue.js"></script></head>
<body><div id="root"><h2>学校名称{{name}}</h2><h2>地址{{address}}</h2></div><script>let vue = new Vue({el:"#root",data:{name:"计算机",address:'昆明'}});console.log(vue._data.name)/*
* 1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
*
*
*
*
* */</script></body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="1.vue.js"></script></head>
<body>
<div class="root"><h1>{{name}}</h1><!-- 当我点击这个按钮的时候 我就去寻找函数名为showInfo的函数事件去使用--><button v-on:click="showInfo">提示</button><!-- 简写 v-on 与@等价 --><button @click="showInfo2">确定</button>
</div><!--事件的基本使用：1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；--><script>new Vue({el:".root",data:{name:"计算机"/* 在Vue中给标签绑定事件需要使用一个指令：* v-on:click***** */},// 使用配置项目 把回调函数放在vue实例中methods:{showInfo1(event){// 对象里面配方法 因此把function关键字去掉console.log(event)// document.write("你好 同学！")// event这个参数就是鼠标alert("你好！")},showInfo2(){alert("你好 计算机科学与技术")}}})</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件修饰符</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style></head><body><!-- Vue中的事件修饰符：1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止默认事件（常用） --><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'},methods:{showInfo(e){alert('同学你好！')// console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for (let i = 0; i < 100000; i++) {console.log('#')}console.log('累坏了')}}})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>键盘事件</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche = 13 //定义了一个别名按键new Vue({el:'#root',data:{name:'尚硅谷'},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_插值语法实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{firstName}}-{{lastName}}</span></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{firstName:'张',lastName:'三'}})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_methods实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName()}}</span></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods: {fullName(){console.log('@---fullName')return this.firstName + '-' + this.lastName}},})</script>
</html>
属性就是data里面的数据
方法(函数)就是methods里面的方法el用来绑定标签里面的类名或id data用来存放 标签里面要显示的内容 插值语法 methods用来存放对应的事件触发代码内容
computed用来存放计算属性<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 计算属性：1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注：1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。--><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>测试：<input type="text" v-model="x"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/><!-- 全名：<span>{{fullName}}</span> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/>全名：<span>{{fullName}}</span> --></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',x:'你好'},methods: {demo(){}},computed:{fullName:{//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log('get被调用了')// console.log(this) //此处的this是vmreturn this.firstName + '-' + this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{//完整写法/* fullName:{get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}} *///简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><!-- <button @click="isHot = !isHot">切换天气</button> --><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},})</script>
</html>
get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}} *///简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}})
</script>
```
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><!-- <button @click="isHot = !isHot">切换天气</button> --><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},})</script>
</html>
