Article Directory
1. Overview of Vue
- Vue: Progressive JavaScript framework
声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建
2. Basic use of Vue
The basic steps of using Vue
- Need to provide label filling data
- Introduce vue.js library file
- Use Vue syntax templates
- Fill the label with the data provided by Vue
1. Provide labels for filling in data
<div id="app">
<div></div>
</div>
2. Introduce the vue.js library file
<script src="js/vue.js"></script>
3. Use Vue's grammar writing function
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
4. Fill the label with the data provided by vue
<!-- 1、提供标签用于填充数据 -->
<div id="app">
<!-- 4、将vue提供的数据填充到标签里 使用插值表达式{
{
}}，作用就是将数据填充到指定的标签的位置。 -->
<div>{
{
msg}}</div>
<div>{
{
1 + 1}}</div>
</div>
- The complete code is as follows
<div id="app">
<!-- {
{
}}代表插值表达式用法 -->
<!-- 把数据填充到html中，可以进行计算操作 -->
<div>{
{
meg}}</div>
<div>{
{
3+2}}</div>
<div>{
{
meg+'....'+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
/*el：元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 */
el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
data: {
/* data：绑定数据（值是一个对象）用于数据提供 */
meg: 'Hello vue!'
}
})
</script>
Three. Vue code operation principle
