初学Vue笔记与心得【00】

初学Vue笔记与心得 认识Vue

安装Vue.js

1. script引入使用 （我用的方法）
   安装网址：点此跳转到安装
2. NPM 安装

$ npm install vue

使用 vue

• 引入vue

<script src="vue.js"></script>

• Hello world

// 创建一个p标签 id为demo
	 <p id="demo">
	 	// 插值语法 {{}} 用于标签体中
	        Hello {{name}}
	 </p>
	 
// js部分
// 实例化Vue  el为需要绑定的元素 一一对应关系
// data是储存的数据
	new Vue({
        el:'#demo',
        data:{
            name:'world'
        }
    })

• 页面效果
  
  我们可以看到 name的值已经被渲染上去了 然后把name的值做一下修改
  name:'justkang' 这时再刷新页面 内容也进行了更新
  

• 修改标签的属性值

	<p id="demo">
		// 插值语法 {{}} 用于标签体中
        Hello {{name}}
        // 指令模板语法 v-bind:  用于标签的属性
        <a v-bind:href="blog.url">{{blog.name}}</a>
        // 语法糖（简写） ：
        <a :href="blog.url">{{blog.name}}</a>
    </p>
// js部分
// 实例化Vue  el为需要绑定的元素 一一对应关系
// data是储存的数据
	new Vue({
        el:'#demo',
        data:{
            name:'world',
            blog:{
                name:'CSDN博客',
                url:'https://blog.csdn.net/'
            }
        }
    })

页面效果

总结知识点

1. vue实例中 el 要与元素进行绑定 且为一一对应
2. 插值模板 {{xxx}} 用于标签体中 xxx为js表达式或者data中属性
3. 指令模板 用于绑定元素的属性值 v-bind:属性=“xxx” xxx为js表达式或者data中属性
   简单写法 :属性=“xxx”