vue-基本使用

1.vue基本使用

1.引入vue.js文件
2.创建Vue实例对象(vm), 指定选项(配置)对象
3.el : 指定dom标签容器的选择器
4.data : 指定初始化状态数据的对象/函数(返回一个对象)
5.在页面模板中使用{{}}或vue指令

html文件

	<div id="app">
            <input type="text" v-model="message">
            <p>{{ message }}</p>
    </div>

js文件

	var vm = new Vue({
        el:'#app',
        data:{
            message : 1234
        }
    })

input输入框值改变，p标签的值也跟着改变；v-model是双向数据绑定指令

2.vue模板使用

	<div id="app">
            <p>{{ message }}</p>
            <p v-text="message"></p>
            <p v-html="message"></p>
    </div>

	var vm = new Vue({
        el:'#app',
        data:{
            message : '<a href="http:/www.baidu.com">百度</a>'
        }
   	 })

网页显示：

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

3.v-bind指令

v-bind 指令可以用于响应式地更新 HTML 特性；强制数据绑定的形式

	<div id="app">
            <img src="url" alt="">
    </div>

	var vm = new Vue({
	        el:'#app',
	        data:{
	            url : 'http://img2.imgtn.bdimg.com/it/u=4055535280,256776122&fm=26&gp=0.jpg'
	        }
	    })

图片不显示；因为没有解析成html特性；网页解析的结果如下图：

加上v-bind指令

	<div id="app">
            <img v-bind:src="url" alt="">
    </div>
    
    <!-- <div id="app">
            <img :src="url" alt="">
    	</div> -->        <!--v-bind 缩写形式-->

4.v-on 缩写是 @

	<div id="app">
      <button @click="getMsg(message)">点击</button>
    </div>

	var vm = new Vue({
	        el: "#app",
	        data: {
	          message: 123
	          age:10
	        },
	        methods: {
	          getMsg(msg) {
	          	console.log(this.age)//打印10
	            console.log(msg);//打印123
	          }
	        }
	      });

methods:

包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data属性用this调用