vue基础

vue的特性

1、数据驱动视图
页面所依赖的数据变化 到 vue监听数据的变化 到 页面结构
数据的变化会驱动视图自动更新
2、双向数据绑定
在网页中，form表单填写数据，axja负责提交数据

mvvm

mvvm是vue实现数据驱动试图和双向数据绑定的核心原理。mvvm指定的是model view 和viewmodel，它把每个html页面都拆分成三个部分
mvvm概念：
model表示当前页面渲染时所依赖的数据源
view表示当前页面所渲染的dom结构
viewmodel表示vue的实例，它是mvvm的核心
mvvm的工作原理
viewmodel作为mvvm的核心，是它把当前页面的数据源和页面的结构连接在一起
在数据源发生变化时，会被viewmodel监听到，vm会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被vm监听到，vm会把变化过后最新的值自动同步到model数据源中。

vue的基本使用

1、基本使用步骤
导入vue.js的script脚本文件
在页面中声明一个将要被vue所控制的dom区域
创建vm实例对象

指令

内容渲染指令
用来辅助开发者渲染dom元素的文本内容。
1、v-text
将usename对应的值，渲染到第一个p标签中
2、{{}}
vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称概念时插值表达式
3、v-html
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含html标签的字符串渲染为页面的html元素，则需要用到v-html。
属性绑定指令
插值表达式只能用在元素的内容节点中，不能用于元素的属性节点中
1、v-bind 简写为：
为元素的属性动态绑定值
反转字符串：
tips.split(’’).reverse().join(’’)
时间绑定指令
1、vue提供v-on事件绑定指令，用来辅助程序员dom元素的绑定事件的监听
简写为：@
2、$event指令vue提供了内置变量，名字叫做$event，他就是原生dom的事件对象e
e.preventDefault()防止a链接跳转event.stopPropagation()
事件修饰符：@click.prevent进一步组织链接跳转