Vue.js文档

 

 

 

 

参考网址：https://vuefe.cn/

 

第一  安装

1.下载到本地后使用<script>标签直接引入

2.使用CDN引入

例如：使用CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

3.在浏览器中安装Vue Devtools调试Vue.js程序

 

第二 介绍

1.Vue.js是什么

Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。

 

2.声明式渲染

例如：

<div id="app">
  {{ message }}
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停此处几秒，
    可以看到此处动态绑定的 title！
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 '   new Date().toLocaleString()
  }
})
</script>

 

　　运行结果如下：

 3.条件与循环

例如：

<div id="app-3">
  <span v-if="seen">现在你可以看到我</span>
</div>

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app3 = new Vue({
	el: '#app-3',
	data: {seen:true}
});
var app4 = new Vue({
	el:"#app-4",
	data:{
		todos:[
		{text: "Java"},
		{text: "PHP"},
		{text: "Python"},
		]
	}
});
</script>

　　运行结果如下：

 

4.时间监听

例如：

<div id="app-1">
  <span v-on:click="reverseMessage">{{message}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app1 = new Vue({
	el:"#app-1",
	data:{
		message: "Hello Vue.js"
	},
	methods:{
		reverseMessage: function(){
			this.message = this.message.split('').reverse().join('');
		}
	}
});
</script>

　　运行结果如下：

当点击文字时文字进行了翻转

 

5.双向数据绑定

例如：

<div id="data-bundle">
<p>您的用户名为：{{username}}</p>
<input name="username" v-model="username"/>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var data_bundle = new Vue({
	el:"#data-bundle",
	data:{
		username:"liuzhiqiangxyz"
	}
});
</script>

　　运行结果如下所示：

当修改输入框的值时，上面段落文字也跟着改变

 

6.自定义模板标签

例如：

<div id="app">
<mylib v-bind:variable1={text:"Python"}></mylib>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('mylib', {props:['variable1'], template:"<p>{{variable1.text}}</p>"})
var app = new Vue({
	el:"#app",
	data:{
	}
});
</script>

　　运行结果如下：