Vue基础知识笔记

xw大约 2 分钟VueVue

1、引包、留坑、实例化、插值表达式

直接看代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 留坑 -->
	<div id="app"></div>


	<!-- 引包 -->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		// 实例化启动vue
		new Vue({
			el:'#app',//目的的，可以识别类名、id名和标签名，如果做到极致优化可以直接用document.getElementById获取
			template:`   
			<div>
				<div>我这里是模板内容{{ msg }}</div>
				<div>111</div>
			</div>
			`,//模板内容,根节点只能有一个
			data:function(){
				return {
					msg:'Hello Vue!'
				}
			}
		})
	</script>
</body>
</html>

2、常用指令

v-if:一般做元素插入和移除操作。
v-text:显示数据（不能解析html标签。
v-html: 显示数据，可以解析html标签。
v-for: for循环遍历。
v-else-if,v-else:与v-if配合使用。
v-show:显示隐藏

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app"></div>
<script type="text/javascript" >
    new Vue(
        {
            el:'#app',
            template:`
              <div>
                   <div v-text="mytext"></div>
                   <hr>
                   <div v-html="myhtml"></div>
                   <hr>
                   <div v-show="vshow">我是v-show</div>

                   <ul>
                       <li v-for="(item,index) in arrays">{{item}}---{{index}}</li>
                   </ul>
                   <br>
                   <ul>
                       <li v-for="(obj,key) in objfor">{{key}}---{{obj}}</li>
                   </ul>
                   <br>
                  <button v-if='num==1'>测试v-if</button>
                   <button v-else-if='num==2'>测试v-else-if</button>
                   <button v-else>测试v-else</button>

              </div>

           `,
            data:function () {
                return{
                    mytext : '<h1>hello vue</h1>',
                    myhtml : '<h1>hello vue</h1>' ,
                    vshow: true,
                    arrays:['a','b','c'],
                    objfor:{sex:'男',name:'向往'},
                    num:2

                }
            }
        }
    )


</script>


</body>

</html>

输出结果：

发现v-text标签无法解析<h1>标签，而v-html可以解析。

3、单双向数据流及事件绑定

vue单向数据流绑定属性值使用v-bind，当内存中值发生改变会导致页面发生改变，页面改变不会导致内存中的值发生改变。双向绑定使用v-model,内存中的值改变或者页面改变都会互相影响。

事件绑定使用v-on，格式为v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名

下面写一个小demo测试一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    console.log(this)
    new Vue({
        el:"#app",
        template:`
				<div>

				<input type='text' v-bind:value="name" :class="name"><br>

				<input type='text' v-model="name"></br>
				{{ name }}
				<button v-on:click="change">点我改变变量</button>
				</div>

			`,
        data:function(){
            return {
                name:'hello'
            }
        },
        methods:{
            change:function(){
                console.log(this)
                this.name='我改变了，是在方法属性里面定义的方法'
            },
        }
    })
</script>
</body>
</html>

结果：

点击按钮后：

Vue基础知识笔记

# 1、引包、留坑、实例化、插值表达式

# 2、常用指令

# 3、单双向数据流及事件绑定

1、引包、留坑、实例化、插值表达式

2、常用指令

3、单双向数据流及事件绑定