参考网址：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>
运行结果如下：