Vue入门（一）

Vue入门（一）

导入js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue使用基本框架

<div id="app">
    {{ message }}
</div>

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

页面结果:
Hello Vue

Vue指令

v-bind

• v-bind:标签属性=“绑定vue对象中的data对象中的变量/对象”

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

<div v-bind:title="message">
    绑定div的title属性!
</div>
<div :title="message">
    绑定div的title属性!(简写)
</div>

• v-bind内部支持各种表达式

.A{
    background: red;
}

var vm = new Vue({
        el:'#app',
        data:{
            isAClass:true
        }
});

<div :title="message" :class="isAClass?A:''">
    v-bind内部支持表达式
</div>
<!-- 若isAClass为true,则该div标签的样式动态改变为A类的样式 -->
<div :title="message" :class="{A:isAClass}">
    v-bind内部支持对象形式
</div>

v-text

• 和{{}}有同样的效果，但会完全覆盖元素中的text
• 支持写表达式

<div v-text="message">
</div>

v-html

• 可内嵌html标签
• 使用同v-text

v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    });
</script>
<input type="text" @keyup.enter="helloWorld"/>
<!-- keyup好像只能在input标签中使用 -->

小结

• 创建Vue示例时:el(挂载点),data(数据),methods(方法)
• v-on指令的作用是绑定事件,简写为@
• 方法中通过this关键字获取data中的数据
• v-text指令的作用是:设置元素的文本值,简写为{{}}
• V- html指令的作用是:设置元素的innerHTML

v-show

• 绑定图片的显示与隐藏
• 支持表达式和变量

<div id="app">
	<img src="地址" v-show="true" />
    <img src="地址" v-show="isShow" />
    <img src="地址" v-show="age>=18" />
</div>

var app = new Vue({
    el:"#app",
    data:{
        isShow:false,
        age:16
    }
})

v-if

• 效果与使用同v-show
• 不同的是，表达式为true时元素存在于dom树中，表达式为false时元素从dom树中移除

v-for

• 生成多个模板结构

<div id="app">
        <ul>
        	<li v-for="(url,index) in arr">
				<a :href="arr[index]">{{url}}</a>
			</li>
        </ul>
</div>

var vm = new Vue({
        el:'#app',
        data:{
            message:"hello vue",
			arr:["http://www.baidu.com/","http://bilibili.com"]
        }
});

v-model

• 双向绑定表单元素的值

<input type="text" v-model="message"/>
<input type="button" value="ClearMessage" @click="clearMessage"/>
{{message}}

• JS如下：

var vm = new Vue({
    el:'#app',
    data:{
        message:"hello vue"
    }
    methods:{
    	clearMessage:function(){
    		this.message="";
		}
	}
});
``