day1 Vue学习

1.vue是什么一套用于构建用户界面的渐进式javaScript框架。2.谁开发的3.vue特点1。组件化2.声明式。4.学习vue之前基础初识vue!DOCTYPE html html head meta charsetUTF-8 / title初识Vue/title !-- 引入Vue -- script typetext/javascript src../js/vue.js/script /head body !-- 初识Vue 1.想让Vue工作就必须创建一个Vue实例且要传入一个配置对象 2.root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新 注意区分js表达式 和 js代码(语句) 1.表达式一个表达式会产生一个值可以放在任何一个需要值的地方 (1). a (2). ab (3). demo(1) (4). x y ? a : b 2.js代码(语句) (1). if(){} (2). for(){} -- !-- 准备好一个容器 -- div iddemo h1Hello{{name.toUpperCase()}}{{address}}/h1 /div script typetext/javascript Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:#demo, //el用于指定当前Vue实例为哪个容器服务值通常为css选择器字符串。 data:{ //data中用于存储数据数据供el所指定的容器去使用值我们暂时先写成一个对象。 name:atguigu, address:北京 } }) /script /body /html模板语法!DOCTYPE html html head meta charsetUTF-8 / title模板语法/title !-- 引入Vue -- script typetext/javascript src../js/vue.js/script /head body !-- Vue模板语法有2大类 1.插值语法 功能用于解析标签体内容。 写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 2.指令语法 功能用于解析标签包括标签属性、标签体内容、绑定事件.....。 举例v-bind:hrefxxx 或 简写为 :hrefxxxxxx同样要写js表达式 且可以直接读取到data中的所有属性。 备注Vue中有很多的指令且形式都是v-????此处我们只是拿v-bind举个例子。 -- !-- 准备好一个容器-- div idroot h1插值语法/h1 h3你好{{name}}/h3 hr/ h1指令语法/h1 a v-bind:hrefschool.url.toUpperCase() xhello点我去{{school.name}}学习1/a a :hrefschool.url xhello点我去{{school.name}}学习2/a /div /body script typetext/javascript Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。 new Vue({ el:#root, data:{ name:jack, school:{ name:尚硅谷, url:http://www.atguigu.com, } } }) /script /html数据绑定!DOCTYPE html html head meta charsetUTF-8 / title数据绑定/title !-- 引入Vue -- script typetext/javascript src../js/vue.js/script /head body !-- Vue中有2种数据绑定的方式 1.单向绑定(v-bind)数据只能从data流向页面。 2.双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。 备注 1.双向绑定一般都应用在表单类元素上如input、select等 2.v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。 -- !-- 准备好一个容器-- div idroot !-- 普通写法 -- !-- 单向数据绑定input typetext v-bind:valuenamebr/ 双向数据绑定input typetext v-model:valuenamebr/ -- !-- 简写 -- 单向数据绑定input typetext :valuenamebr/ 双向数据绑定input typetext v-modelnamebr/ !-- 如下代码是错误的因为v-model只能应用在表单类元素输入类元素上 -- !-- h2 v-model:xname你好啊/h2 -- /div /body script typetext/javascript Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。 new Vue({ el:#root, data:{ name:尚硅谷 } }) /script /htmlel和data的二种写法!DOCTYPE html html head meta charsetUTF-8 / titleel与data的两种写法/title !-- 引入Vue -- script typetext/javascript src../js/vue.js/script /head body !-- data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例随后再通过vm.$mount(#root)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。 3.一个重要的原则 由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了。 -- !-- 准备好一个容器-- div idroot h1你好{{name}}/h1 /div /body script typetext/javascript Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。 //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(){ console.log(,this) //此处的this是Vue实例对象 return{ name:尚硅谷 } } }) /script /html