vue前端

vue是什么？

vue一套用于构建用户界面的渐进式javascript框架

vue是谁开发的？

尤玉溪

vue的特点

1.采用组件化模式，提高代码复用率且让代码更好维护

2.声明式代码，让编码人员无需直接操作DOM，提高开发效率

3.使用虚拟DOM+优秀的diff算法，尽量复用DOM节点。

学习vue之前要掌握的javascript基础知识？

es6语法规范，ES6模块化，包管理器，原型，原型链，数组常用方法，axios,promise ......

vue网址

Vue.js

Creating a Project | Vue CLI

下载

安装 — Vue.js

添加vue扩展组件（找到的）

在谷歌Chrome浏览器中添加vue.js扩展组件_橙之殇的博客-优快云博客_chrome vue 扩展

百度网盘 请输入提取码 提取码为6gct

关闭提示

 <script type="text/javascript">

      vue.config.productionTip=false //阻止vue在启动时生产提示

    </script>

el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串

data用于存储数据，数据供el指定容器去使用，值我们暂时写成一个对象。

vue模板语法：分为两种1.插值语法2.指令语法

1.插值语法：功能用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读到data中的所有属性

2.指令语法：功能用于解析标签（包括：标签属性，标签体内容，绑定事件......）。

举例:v-bind:href="xxx"或简写为：href=“xxx”，xxx同样要写js表达式。

备注：vue中有很多指令且形势都是v-????。

vue中有两种数据绑定的方式

1.单向绑定（v-bind）：数据只能从data流向页面

2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

备注：1.双向绑定一般都应在表单类元素上（如：input，select等）

2.v-model：value可以简写为v-model，因为v-model默认收集的就是value值

el和data的两种写法

el有两种写法

1.new vue时候配置el属性

2.先创建vue实例，随后再通过vm.$mount('#root')指定el的值

data有两种写法1.对象式 2.函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则就会报错

一个重要原则：由vue管理的函数。一定不要写箭头函数，一旦写了箭头函数，this就不再是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:'程程呀'

}

}

}）

MVVM模型

m:模型（model）：data中的数据

v:视图（view）：模板代码

vm：视图模型（viewmodel）：vue实例

观察发现：1.data中所有属性，最后都出现在vm身上

2.vm身上所有的属性及vue原型上所有属性，在vue模板中都可以直接使用

事件的基本使用：

1.使用v-on：xxx或者@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置methods对象中，最终会在vm上

3.methods中配置的函数，不需要箭头函数！否则this就不是vm了

4.methods中配置的函数，都是被vm所管理的函数，this指向是vm或者组件实例对象

5.@click=“demo”和@click=“demo（$event）”效果一致。但后者可以传参

vue中的事件修饰符：

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式：

5.self：只有event，target是当前操作的元素是才触发事件

6.passive：事件的默认行为当即执行，无需等待时间回调执行完毕；

vue中常用的按键别名

回车=>enter

删除=>delete（捕获“删除”和“退格”键）

退出=>esc

空格=>space

换行=>tab

上=>up

下=>down

左=>left

右=>right

2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰符（用法特殊）Ctrl，alt，shift，meta

3.1配合keyup使用：按下修饰符键的同时，再按下其他键，随后释放其他键，时间才被触发

3.2配合keydown使用：正常触发时间

4.也可以使用keycode去指定具体按键（不推荐）

5.vue，config,keycodes,自定义键名=键码， 可以去定制按键别名