vue.js 2.x

使用vue提供指令(模板语法)开发可以更快捷方便的渲染页面结构

---

最好在vscoder 里面使用装插件 vetur

1. 引入vue.js文件
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2. 创建vue应用
3. 指定vue应用挂载的入口元素
4. 定义数据源
5. 计算方法： 自定义函数 /方法等

   const vm = new Vue({
   	//3.指定vue应用挂载的入口元素
   	el:	"#app";         //在id为app的区域内都可以识别vue语法
   	data:{  			//4.定义数据源
   		username:"vue";
   	}
   	methods:{         //在methods里面的方法内部的this都指向当前的vue应用实例对象
   		$event   表示当前事件对象  用来传参
   		handlecount(){}	 //定义的方法都放到methods里
   	}
   })
   

   <div id="app">
   {{username}}     //在html里可以直接找到内容
   <div>
   

   {{}} 文本差值表达式
   <div :style="[属性对象1, 属性对象2]"> 多个对象时用数组引入

数据驱动视图:vue会监听数据的变化，当页面所依赖的数据发生变化时，vue会去通知页面结构重新获取最新的数据并渲染
双向数据绑定:v-model表单

---

vue指令

指令都是以标签属性来写的,书写时有 v- 前缀的属性 可以理解为js的小环境

• 内容渲染指令:
  • v-html //会覆盖标签里面的内容 会解析内容里的html结构
  • v-text //会覆盖原本标签里的内容 不解析内容里的html结构
    * {{}} //常用 可以写表达式,该表达式一定要有结果返回
• 属性绑定指令:
  • v-bind: //在标签里直接绑定属性 例:<a v-bind:href="url"><> url为data里面的vue里面的变量 因为常用 可以简写为:
    操作属性 ：
    <div :[attr] = "classname"></div> //属性要小写
• 事件绑定指令
  • v-on：操作事件 简写@
  • 事件修饰符 接在事件名后 例如@clik.prevent 可以连着用
    1. .stop 阻止冒泡
    2. .prevent 阻止默认行为
    3. .self 该事件只能有自己触发
    4. .once 一次性事件
    5. .passive 不阻止默认行为
• 双向绑定指令
  • v-model 一般input或select里面使用
    1. text里面的value
    2. checkbox复选框里面的check
    3. 多个复选框使用数值 选择时会将对应的value添加到数组
    4. radio将v-model绑定同一个值
    5. 下拉框里面提示语的option里面一般写上disabled
    6. 多个选择时值为数值
    7. v-model.trim 首尾去空格
    8. v-model.number 内容转数字
    9. v-model.lazy 鼠标移出input后才返回数据
• 条件渲染指令
  • v-if
  • v-else
    1. 绑定的值要一样
  • v-show 显示与隐藏
    template假节点:能进行操作但不会被渲染出
  • v-for

  <-- 当前项 in 数据源 -->
  <li v-for="item in userinfolist">   
  <--  多个变量 -->
  <li v-for="(item, index) in userinfolist"> 
  

一定要写key值 必须要为唯一值