新手入门vue
vue框架的优势
1. 简单上手快，运行速度快是一个轻量级前端框架.vue的目标是通过尽可能简单的API实现响应数据绑定和组合的视图组件。其核心是一个响应式数据绑定的系统
2.vue是单页面应用使页面局部刷新，不用每次跳转页面都要请求所有数据和dom元素，这样就大大的增加访问速度和提升用户体验。
3.提供很多第三方ui库，这样节约开发时间
Vue的使用
创建一个 .html文件,然后通过如下方式引入Vue:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> //vue标准是要用两对花括号圈住数据名的 {{msg}} <body> js部分： //使用vue要先new 一个vue对象出来传入json格式的数据 <script> new Vue({ //作用域：el - element缩写 el:'body', //输出的数据 data:{ msg:'hello vue!', } }) </script>
{{}} -> 必须在作用域里面放入输出的模板，模板里面放入data里面你自己定义的变量
如何选取class或id为作用域 <div class="myDiv"> {{msg}} </div> <script> new Vue({ //这里选区类与id是与jquery的方式是一样的，id的话就是#myDiv el: '.myDiv', data: { msg:'hello vue!', } }) </script>
常用指令 v-for 循环
<div v-for='i in arr'>{{i}}{{$index}}</div> <div v-for='i in json'>{{i}}</div> <div v-for='(key,value) in json'>{{key}}=>{{value}}</div> <div v-for='i in json'>{{$key}}=>{{i}}</div> <script> new Vue({ el:'body', data:{ //这是个字符串数组 arr:['a','b','c'], json:{ bill:18, bill2:21, bill3:24 } } }) </script>
v-for: {{$index}} -> 索引值，{{$key}} -> key值
- 因为json是键值对，可以理解为数组的索引与值的关系，所以可以用不同方式访问。
- {{$index}}可以进行计算 => {{$index+10}} 从10开始计数
v-model：双向绑定 -- 数据和输出绑定
<input type="text" v-model='msg'> {{msg}} <script> new Vue({ el:'body', data:{ msg:'helloWord', } }) </script>
v-if 指令
下例中，当ok的值为真时，语句就可见；为假时，语句就不可见。
<div id="app"> <p v-if="ok">条件渲染</p> </div> <script> var i=new Vue({ el:"#app", data:{ ok:true } }) </script>
vue的事件绑定
绑定事件 v-on:click 简写：@click；为button添加一个change的点击事件，改变content的值
<div id="app" @click="change">{{content}}</div> <script> var app = new Vue({ el: '#app', data: { count:'提交' }, methods: { change(){ this.content="已提交" } } }) </script>
