门户网站制作流程,oppo软件商店下载官方,wordpress 单页面翻页,网站seo运营培训机构一、Vue环境搭建及第一个Demo
1.1编程工具#xff1a;
下载Vscode,并安装插件
在Extensions 选项中搜索插件#xff1a;
1#xff1a;Live Server#xff1a;将当前项目作为根路径#xff0c;启动一个服务端#xff0c;这样右键就会有如下选项 2#xff1a;Eclipse …一、Vue环境搭建及第一个Demo
1.1编程工具
下载Vscode,并安装插件
在Extensions 选项中搜索插件
1Live Server将当前项目作为根路径启动一个服务端这样右键就会有如下选项 2Eclipse Keymap作为后端开发工程师习惯了Eclipse 的快捷键当然要安装这个插件貌似有些快捷键还是要自己设置。
1.2 开始Vue
官网 https://cn.vuejs.org/v2/guide/installation.html 基于Vue2.x版本开始学习
1下载开发版本的Vue.js开始第一行代码
工程目录结构如下 完整代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入Vue --script typetext/javascript src./js/vue.js/script
/headbodydiv iddemoh1Hello, {{name}}/h1/divscript typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools truevar vm new Vue({el: #demo,data: {name: hanzhe}})/script
/body/html
主要步骤
1:引入Vue.js: !-- 引入Vue --script typetext/javascript src./js/vue.js/script
2:创建一个div容器并设置一个id的标签属性h1中使用{{xxxx}}至于为什么这么写目前先记住是这样规定的。xxx为js的表达式例如 a, ab ,demo()等
3:创建Vue实例
script typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools true// 至于变量名称为什么为vm学过MVVM 就明白了var vm new Vue({el: #demo,// el表示元素绑定id为demo的容器data: {name: hanzhe// name为div中对应的名称}})/script
这样第一个Vue案例就成功了右键 open with live server在浏览器上的展示 1.3 官网推荐安装Vue Devtools
科学上网在chrom上安装此拓展程序安装完并开启后并没有在F12的面板中查看到想要的效果 一顿百度后说是要修改配置找到拓展程序的安装目录
查找方法 个人资料路径即为拓展程序安装路径找到对应的拓展程序修改manifest.json文件里面的值 persistent: true //修改为ture
二、模板语法
vue中模板语法包括两大类插值语法、指令语法 插值语法
功能用于解析标签体内容
写法{{xxx}},xxx是js表达式可以直接读取到data中的所有区域像上面demo中的{{name}}。 指令语法
功能用于解析标签包括标签属性、标签体内容、绑定事件……
举例
bodydiv iddemoh1Hello, {{name}}/h1a href{{url}}跳转/a/divscript typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools truevar vm new Vue({el: #demo,data: {name: hanzhe,url: wwww.baidu.com}})/script
/body
在div中有一个超链接href标签属性值用插值语法data中也有对应的值查看页面能否达到想要的效果 页面报错提示不能使用{{xxx}}插值语法,需要使用v-bind或者
修改如下即可正常跳转指定的链接地址v-bind还可以简写为 : 冒号
深理解指令语法用于解析标签属性、绑定事件插值语法解析标签体内容
bodydiv iddemoh1Hello, {{name}}/h1a v-bind:hrefbaidu.url跳转1/a!-- 简写 --a :hrefbaidu.url跳转2/a/divscript typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools truevar vm new Vue({el: #demo,data: {name: hanzhe,baidu:{url:https://www.baidu.com/}}})/script
/body
三、数据绑定
Vue中有2种数据绑定的方式 单向绑定v-bind只能从data流向页面 双向绑定v-model数据不仅能从data流向页面还可以从页面流向data
备注
双向绑定一般应用在表单类元素上如input ,select,textarea等
v-modul:value可以简写v-model因为v-model默认收集的就是value的值 !-- 数据绑定 --!-- 单向数据绑定 --p单向数据绑定input typetext v-bind:valuename/p双向数据绑定input typetext v-modelname
四、el与data的两种写法
el的两种写法
1创建vue实例对象时配置el属性
2先创建Vue实例随后再通过vm.$mount(#root)指定el的值
data的两种写法
1对象式data:{}
2函数式data(){return {}}
如何选择目前哪种写法都可以以后到组件时data必须使用函数否则会报错。
一个重要的原则
有vue管理的函数一定不要写箭头函数(没明白先记着)否则this就不再是Vue实例了 script typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools truevar vm new Vue({// el的第一种写法// el: #demo,// data的第一种写法// data: {// name: hanzhe,// baidu: {// url: https://www.baidu.com/// }// }// data的第二种写法函数式data() {return {name: zhangsan,baidu: {url: http://www.baidu.com}}}})// el的第二种写法vm.$mount(#demo)/script
五、MV VM 模型 MVVM模型 M模型Modeldata中的数据 V视图View模板代码 VM视图模型ViewModelVue实例所以用vm表示vue实例
观察发现 data中所有的属性最后都出现在vm身上属性为_data vm身上所有属性及Vue原型身上所有属性在Vue模板中都可以直接使用。 bodydiv iddemoh1名称, {{name}}/h1h1年龄, {{age}}/h1h1测试, {{$options}}/h1/divscript typetext/javascript// 关闭 引入的vue为开发环境版本的提示Vue.config.productionTip false;// 开启页面开发者工具Vue.config.devtools truevar vm new Vue({data() {return {name: zhangsan,age: 12}}})// el的第二种写法vm.$mount(#demo)/script
/body
六、数据代理
使用Object.defineProperty对属性进行绑定 script typetext/javascriptlet number 18let person {name: zhangsan,sex: 男,}// 当有人读取person的age属性时get函数getter呗调用且返回值就是age的值Object.defineProperty(person, age, {value: 90})console.log(person)/script
// 控制台输出
{name: zhangsan, sex: 男, age: 90}
数据代理通过一个对象代理另外一个对象中属性的操作读/写
script typetext/javascriptlet number 18let person {name: zhangsan,sex: 男,}// 当有人读取person的age属性时get函数getter呗调用且返回值就是age的值Object.defineProperty(person, age, {// value: 90,get() {console.log(有人读取了属性)return number},set(value) {console.log(有人修改了属性)number value}})console.log(person)/script 基本原理 通过object.defineProperty()把data对象中属性添加到vm上 为每一个添加到vm上的属性都有一个gettersetter 在getter,setter内部去操作读写data中对应的属性 Vue将data中的数据拷贝了一份到_data属性中又将_data里面的属性提到Vue实例中通过defineProperty实现数据代理这样通过getter/setter操作name进而操作_data中的name,又对data进行数据劫持实现响应。
