Vue基础知识

最新推荐文章于 2022-10-12 21:22:15 发布
阿宝PHP
最新推荐文章于 2022-10-12 21:22:15 发布
阅读量505
点赞数 1
分类专栏： Vue
本文链接：https://blog.csdn.net/zdklhh/article/details/100182312
版权
Vue 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!-- 案例1（创建一个vue应用）： -->
<div id="app">
    {{message}}
    {{name}}
</div>
<script>
var vm = new Vue({
    el:'#app',  //el：元素
    data:{
        message:'hello Vue!',
        name:'zhangdakang'
    }
})
</script>

<!--  案例2（数据与方法）： -->
<div id="app">
    {{a}}  {{b}}
</div>
<script>
var obj = { a:1 };

Object.freeze(obj) //阻止修改现有的属性

var vm = new Vue({
    el:'#app',  //el：元素
    data:obj
})
obj.a = "test";
vm.a = "test1";
obj.a ===vm.a  //效果是一样的
obj.b = "b的值"; //不会显示b，要在new 一个Vue对象时就要声明

//监测a属性，新值，旧值
vm.$watch('a',function(newVal,oldVal){
    console.log(newVal,oldVal);
})
</script>

<!--  案例3：生命周期钩子 -->
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        msg : "hi vue",
    },
    //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    beforeCreate:function(){
        console.log('beforeCreate');
    },
    /* 在实例创建完成后被立即调用。
    在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
    然而，挂载阶段还没开始，$el 属性目前不可见。 */
    created :function(){
        console.log('created');
    },
    //在挂载开始之前被调用：相关的渲染函数首次被调用
    beforeMount : function(){
        console.log('beforeMount');

    },
    //el 被新创建的 vm.$el 替换, 挂在成功
    mounted : function(){
        console.log('mounted');

    },
    //数据更新时调用
    beforeUpdate : function(){
        console.log('beforeUpdate');

    },
    //组件 DOM 已经更新, 组件更新完毕
    updated : function(){
        console.log('updated');

    }
});
setTimeout(function(){
    vm.msg = "change ......";
}, 3000);
</script>

<!-- 案例4：模板语法-指令 -->
<div id="app">
    {{msg}}
    <span v-once>这个值不会被改变：{{nochang}}</span>
    <p>Using mustaches: {{ rawHtml }}</p>
    <!-- 可以完整输出原始html -->
    <p v-html="rawHtml"></p>
    <!-- v-bind:class/id="属性"   --绑定属性-- -->
    <div v-bind:class="color">test...</div>
    <p>{{ number + 1 }}</p>
    <p>{{ ok == 2 ? 'YES' : 'NO' }}</p>
    <!-- split:拆分，得到字符串，reverse:反序，join:变为字符串 -->
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        msg : "hi vue",
        nochang :"nochang",
        rawHtml : '<span style="color:red">this is should be red</span>',
        color:'blue',
        number : 10,
        ok : 1,
        message : "vue"
    }
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>

<!-- 案例5：模板语法-指令 -->
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <a v-bind:href="url">...</a>
    <!-- @click="xxx" 为元素绑定事件 -->
    <div @click="click1">
        <!-- 增加.top，防止点击click2后，还继续执行click1事件，阻止冒泡 -->
        <div @click.stop="click2">
            click me
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        seen : false,
        url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
    },
    methods:{
        click1 : function () {
            console.log('click1......');
        },
        click2 : function () {
            console.log('click2......');
        }
    }
});
</script>

<!-- 案例6：class与style绑定 -->
<div id="app">
    <!-- v-bind:class -->
    <!-- 三元运算class动态绑定style（数组形式） -->
    <div
    class="test"
    v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>

    <!-- v-bind:style  绑定内联样式 -->
    <div
    :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        isActive : true,
        isGreen : true,
        color : "#FFFFFF",
        size : '50px',
        isRed : true
    }
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:black;}
</style>


<!-- 案例7：条件渲染 -->
<div id="app">
    <!-- 需要频繁的切换，使用v-show较好。运行条件很少改变v-if较好 -->
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    <h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        type : "B",
        ok : true
    }
});
</script>

<!-- 案例8：列表渲染 -->
<div id="app">
	<ul>
		//items是源数据数组，item则是迭代的数组元素的别名
		//为了跟踪每个节点的身份，重用和重新排序现有的元素，需要为每项提供一个唯一的key属性
		<li v-for="item,index in items" :key="index">
		<!-- index:代表索引 -->
		{{index}}{{ item.message }}
		</li>
	</ul>
	<!-- 对象数组 -->
	<ul>
		<li v-for="item, index in messages" :key="index">
			{{item.name}}   {{item.age}}
		</li>
	</ul>
	<!-- 对象 -->
	<ul>
		<li v-for="value, key in object" :key="key">
			{{key}} : {{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		// 数组
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		],
		//对象数组
		messages:[
			{name:'zhangsan',age:18},
			{name:'lisi',age:28}
		],
		// 对象
		object: {
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		}
	}
});
</script>

<!-- 案例9：事件渲染 -->
<div id="app">
    <div id="example-1">
        <button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />
        <button v-on:dblclick="greet('abc', $event)">Greet</button>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        counter: 0,
        name : "vue"
    },
    methods:{
        // 特殊参数e:事件对象
        greet : function (str, e) {
            alert(str);
            console.log(e);
        }
    }
});
</script>
<!-- 事件修饰符 -->
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>


<!-- 案例10：表单输入绑定 -->
<div id="app">
    <div id="example-1">
        <!-- 输入框 -->
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <!-- 文本框 -->
        <textarea v-model="message2" placeholder="add multiple lines"></textarea>
        <p style="white-space: pre-line;">{{ message2 }}</p>
        <br />
        <!-- 复选框 -->
        <div style="margin-top:20px;">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
        <!-- 单选框 -->
        <div style="margin-top:20px;">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <button type="button" @click="submit">提交</button>
    </div>

</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        message : "test",
        message2 :"hi",
        checkedNames : ['Jack', 'John'],
        picked : "Two"
    },
    methods: {
        submit : function () {
            // 获取data里面的值
            console.log(this.message);

        }
    }
});
</script>

<!-- 案例11：组件基础 -->
<div id="app">
    <button-counter title="title1 : " @clicknow="clicknow">
        <h2>hi...h2</h2>
    </button-counter>
    <button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
// 定义组件名称button-counter
Vue.component('button-counter', {
    // props定义组件的属性title
    props: ['title'],
    data: function () {
        return {
          count: 0
        }
    },
    template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
    methods:{
        clickfun : function () {
            this.count ++;
            //$emit()方法触发另外一个clicknow()事件,携带count参数
            this.$emit('clicknow', this.count);
        }
    }
})
var vm = new Vue({
    el : "#app",
    data : {

    },
    methods:{
        clicknow : function (e) {
            console.log(e);//打印出count参数
        }
    }
});
</script>