web前端框架vue试水

一、第一个Vue.js程序

1.如何引入 Vue
创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告，完整版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者是：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

其他关于更多安装 Vue 的方式，如：node.js构建工具，这里不推荐新手入门直接使用，有点麻烦。

2.声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

这样保存html文件，可以获得如下效果：

一些解释：
el：挂载点，Vue会管理el选项命中元素及内部的后代元素，el后为选择器，可以使用其他选择器，但是一般推荐使用唯一的ID选择器。
对于vue，一般挂载到双标签上，但是不能载在HTML和BODY等标签上。
data：数据对象，Vue中用到的数据定义在data中，data中可以写复杂类型的数据（例如对象，数组等），而挂载渲染复杂数据时，遵守JS语法即可，如对象{name：···，····} 用 ‘.’ ,数组用索引。

二、Vue指令（以v-开头的一些特殊语法）

1.v-text(设置标签的文本值）

<div id="app1">
		{{ message + " by zyk~" }}
</div>
	<div id="app2" v-text="message+ ' by zyk~'">---------hhhh--------</div>
</div>
<script>
  var app1 = new Vue({
	el: '#app1',
	data: {
	  message: 'Hello Vue!'
	}});
	var app2 = new Vue({
	el: '#app2',
	data: {
	  message: 'Hello v-text!'
	}
  })
</script>

效果如下：

（注意：使用v-text会覆盖掉挂载元素内部的文本，如果只想更换部分文本，可以尝试:
不想替换的文字{{message}}，而字符串的拼接类似js，不过使用v-text拼接字符串使用的是‘’）

2.v-html（设置标签的innerHtml)
不同于v-text，v-html会解析具有html结构的文本：

<div id="app">
           <p v-html="content"> <span>Yes</span></p>
           <p v-text="content"> <span>Yes</span></p>
</div>
<script>
  var app = new Vue({
	el: '#app',
	data: {
              content: "<a href='#''>Hello Vue!</a>"
	}});
</script>

网页效果：

3.v-on
绑定事件

<div id="app">
          <input type="button" value="事件绑定" v-on:click="yes">
          <input type="button" value="事件简写" @click="yes">
          <h1 v-text="food" @click="fd"></h1>
</div>
<script>
  var app = new Vue({
	el: '#app',
          data:{
              food:"香蕉"
          },
	methods:{
              yes:function(){
                  alert("yes");
              },
              fd:function(){
                  this.food += "好吃！"
              }
          }
        });
</script>

v-on用于为元素绑定事件；
后面的响应事件无需写on；
指令可以简写为@；
绑定的方法定义在vue的methods属性中；
使用this可以访问元素内部的数据；

网页效果：

补充：v-on还有传递事件参数，事件修饰符：

<div id="app">
          <input type="button" value="事件绑定" v-on:click="yes(p1,p2)">
          <input type="text" @keyup.enter="yes"> <!---回车--->
          <h1 v-text="food" @click="fd"></h1>
</div>
<!---更多修饰语法见cn.vuejs.org/v2/api/#v-on---->

4.v-show
根据表达式的真假，切换元素的显示和隐藏
v-show本质是切换display属性，为false时切换display为none

<div id="app">
	<input type="button" value="-" v-on:click="sub">
	<span v-text="number"></span>
	<input type="button" value="+" @click="add">
	<!--v-show本质是切换display属性，为false时切换display为none-->
          <img src="angel.jpg" width="50px" height="50px" v-show="number>=18">
</div>
<script>
  var app = new Vue({
	el: '#app',
          data:{
              number:20,
          },
	methods:{
              sub:function(){
			if(this.number > 0) this.number--;
			else alert("最小为0");
              },
              add:function(){
			if(this.number < 20) this.number++;
			else alert("最大为20");
              }
          }
        });
</script>

效果：

5.v-if
根据表达式的真假，切换元素的显示和隐藏(不是通过样式，而是通过操纵dom元素）
换言之，v-show控制的元素始终在html中，而v-if控制的元素会被移除和添加~
选择：
·对频繁操作的元素用v-show,因为操作dom树性能效耗更大

6.v-bind
设置元素的属性
使用方式：v-bind:属性名=表达式 or :属性名=表达式（省略v-bind)
补充：对于类名的设置可以写成： :class="{类名:isTrue}"

7.v-for
根据数据生成列表结构
经常和数组结合使用
语法为（item,index) in arr

<div id="app">
          <ul>
		<li v-for="(item,index) in arr">
			<div :id="'li'+item.num">{{item.num}},{{index}} </div>
		</li>
	</ul>
</div>
<script>
  var app = new Vue({
	el: '#app',
	data: {
              arr:[{num:1},{num:2},{num:3},{num:4},{num:5}]
	}});
</script>

效果：

8.v-model
获取和设置表单元素的值（双向数据绑定，表单元素是指input，button一类）

<div id="app">
	<input type="text" v-model="message">
	<p  v-text="message"> </p>
</div>
<script>
  var app = new Vue({
	el: '#app',
	data: {
              message:"啦啦啦"
	}});
</script>

效果：

三.Vue的网络开发axios

1.引入axios库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!---文档传送门 github.com/axios/axios-->

2.使用axios的get方法

axios.get("http://your接口").then
		(function(res){
			that.message = res.data;
			console.log(that.message );
		},function(err){
			console.log(err);
		})

参考视频：
黑马程序员-4个小时带你快速入门vue