Vue初相识

目录创建第一个Vue程序Vue的data配置项Vue的template配置项Vue的el配置项在使用Vue之前我们需要去官网先下载VueVue本质是基于JavaScriptJS实现的框架。Vue官网Vue2https://v2.cn.vuejs.org/Vue3https://cn.vuejs.org/下载完之后使用script引入Vue.js引入之后Vue就会被注册成一个全局变量可以通过控制台查看。创建第一个Vue程序!DOCTYPE html html langen head meta charsetUTF-8 title第一个Vue程序/title !-- 第一步引入Vue.js -- script src../js/vue.js/script /head body !-- 第二步指定挂载位置 -- div idapp/div !-- 第三步使用Vue -- script // 3.1创建Vue实例 const vmnew Vue({ template:h1hello world!/h1 }) // 3.2 将Vue实例挂载到指定位置 vm.$mount(#app) // vm.$mount(document.getElementById(app)); /script /body /html代码解释1、当使用script引入Vue.js之后Vue会被注册为一个全局变量就像引入jQuery之后jQuery也会被注册为一个全局变量,通过控制台可以看到这个Vue全局变量2、必须new一个Vue实例如果不new的话是无法直接使用Vue的第一步创建一个空对象作为将要返回的对象。let vm {}第二步将这个空对象的原型指向构造函数的prototype属性也就是将对象的__proto__属性指向构造函数的prototype。【让对象能沿着原型链去使用构造函数中prototype上的方法】vm.__proto__ Vue.prototype第三步将这个空对象赋值给构造函数内部的this关键字执行构造函数。【让构造器中设置的属性和方法设置在这个对象上】Vue.apply(vm, 参数)第四步返回这个对象。return vm3、Vue的构造方法参数是一个options配置对象配置对象中有大量Vue预定义的配置每一个配置项都是keyvalue结构一个keyvalue就是一个Vue的配置项4、template配置项value是一个模版字符串在这里编写符合Vue语法规则的代码Vue有一套自己规定的语法规则写在这里的字符串会被Vue编译器编译将其转换为浏览器能够识别的HTML代码template称之为模版5、Vue实例的$mount方法这个方法完成挂载工作将Vue实例挂载到指定位置也就是将Vue编译后的HTML代码渲染到页面指定的位置注意指定位置的元素会被替换6、‘#app’的语法类似于css中的id选择器语法表示将Vue实例挂载到id‘app’的元素位置也可以用其他选择器如果匹配到多个位置Vue只会选择第一个位置进行挂载从上到下第一个或者直接用原生js去获取vm.$mount(document.getElementById(app));Vue的data配置项!DOCTYPE html html langen head meta charsetUTF-8 / title模板语句的数据来源/title !-- 引入Vue -- script src../js/vue.js/script /head body !-- 指定挂载位置 -- div idapp/div !-- vue程序 -- script new Vue({ // template: h1我叫张三我今年18岁了/h1, template: h1我叫{{name}},我今年{{age}}岁了/h1, //1.1 data函数写法 // data: function () { // return { // name: 章三, // age: 28, // }; // }, //1.2 data函数简写 // data() { // return { // name: 章三, // age: 28, // }; // }, // 2、data对象写法 data: { name: 李四, age: 18, hobby: [跑步, 游泳, 学习], salary: { base: 5k, bonus: { month: 5k, year: 10k, }, }, }, }).$mount(#app); /script /body /html代码解释1、data是Vue实例的数据对象是给整个Vue实例提供数据来源的2、data配置项的value值有两种写法 ObjectFunction对象或者函数现阶段这两种写法都可以后期学到组件化的时候data只能是函数的写法3、如果data是对象的写法对象必须是存粹的对象含有0个或多个keyvalue4、data数据插入到模版语句中可以用{{}},这是Vue框架自己搞的一个语法叫插值语法或叫胡子语法可以从data根据key获取value并且将value插入到对应的位置注意{{}}语法是固定语法不可以添加其他内容例如空格{ { }}5、data可以写多级然后去一级一级获取6、Vue编译器对template进行编译遇到{{}}语法时就去data里取数据然后将获取到的数据插入到对应的位置生成对应的html代码最终将html渲染到挂载位置呈现7、当data发生改变时template模版就会被重新编译重新渲染Vue的template配置项script new Vue({ // 错误的 //template : h1{{msg}}/h1h1张三/h1, template: div h1{{msg}}/h1 h1{{name}}/h1 /div , data: { msg: Hello World!!!!!!!, name: 张三, }, }).$mount(#app); /scriptdiv idapp !-- 模板语句可以写模板语法插值语法指令语法 -- h1{{msg}}/h1 h2欢迎学习Vue/h2 /div代码解释1、template只能有一个根元素2、template编译后进行渲染时会将挂载位置的元素替换。3、template后面的代码如果需要换行的话建议将代码写到符号当中不建议使用 进行字符串的拼接。4、template配置项可以省略将其直接编写到HTMl代码中此时指定挂载的位置就不会被替换5、只要data中的数据发生了变化模版语句就一定会重新编译Vue的el配置项!DOCTYPE html html langen head meta charsetUTF-8 / titleel配置项/title !-- 引入Vue -- script src../js/vue.js/script /head body !-- 指定挂载位置 -- div idapp div h1{{msg}}/h1 h1{{name}}/h1 /div /div !-- vue程序 -- script new Vue({ data: { msg: Hello World!!!!!!!, name: 张三, }, // el配置项确定挂载对象 el: #app, //el : document.getElementById(app) }); //}).$mount(#app) /script /body /html代码解释1、可以不使用$mount(#app)的方式进行挂载了。在Vue中有一个配置项el el配置项和$mount()可以达到同样的效果。2、el配置项的作用el是element单词的缩写翻译为“元素”el配置项主要是用来指定Vue实例关联的容器。也就是说Vue所管理的容器是哪个。el : #app表示让Vue实例去接管idapp的容器。注意一个Vue实例只能接管一个容器body !-- 准备容器 -- div classapp1 h1{{msg}}/h1 h2第一个/h2 /div div classapp2 h1{{msg}}/h1 h2第二个/h2 /div !-- vue程序 -- script const vm1 new Vue({ el: .app1, data() { return { msg: app1, }; }, }); const vm2 new Vue({ el: .app2, data() { return { msg: app2, }; }, }); /script /body