Vue.js的初步运用

最新推荐文章于 2024-07-12 19:47:55 发布

时光912

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量274

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2302_79709692/article/details/136607710

版权

Vue.js的初步运用

<div id="a">
<!-- 容器 ，a容器名称-->
<!-- 注：容器名称尽量使用id绑定唯一值 -->
	{{num}}
</div>	

<script>
	// 阻止VUE在启动时产生的提示
    Vue.config.productionTip = false;
    var a = new Vue({
     // el绑定容器
        el: '#a',
         // data中装的是定义的变量，跟插值对应
        // 1.data:{}对象式
        // 2.data(){return{}}函数式,注：搭建脚手架（vue-cli）后,一定要使用函数式
        // 注：不可以使用箭头函数
        data: {
            num: 'Hello Vue!',
           
        }
    })
    vm.$mount("#ips");
    // 绑定容器的2种方式
    // 1.el绑定:"容器id或class等"
    // 2.Vue实例.$mount("容器id或class等"),注：一定写在最后
</script>

2.v-bind
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<body>
	<div id="ips">
        {{userName}}
        <div>
            <a href="http://www.baidu.com">访问百度</a>
            <!-- v-bind:动态绑定属性 -->
            <a v-bind:href="abc" v-bind:class="a">vue方法访问vue官</a>
        </div>
    </div>
</body>

<script>
	 var a = new Vue({
		data(){
			return{
				abc:"http://www.baidu.com"
		}
		}

	})
</script>

3.v-on或@
我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。

<body>
    <div id="app">
        <!-- 绑定事件
        v-on:事件 == @事件 
        注：事件名称一定不要加on-->
        <button v-on:click="func1(1)">点击1</button>
        <button @click="func1(2)">点击2</button>
    </div>
</body>

<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        // methods处理的函数方法
        methods: {
            func(){
                console.log(1111111);
                return 1111111;
            },
            func1:function(user){
                if(user==1){
                    console.log(222222222);
                }else {
                    console.log(333333333);
                }
            },
            func2(){
                console.log(333333333);
            }
        },
    })
    vm.$mount("#app");
</script>

4.v-cloak

<style>
        [v-cloak]{
            display: none;
        }
        /* v-cloak 解决网速慢展示插值|页面出现闪烁或白屏，
        使用需要给标签添加v-cloak,还需要添加上面代码*/
    </style>

<body>
    <div id="app" style="height: 2000px;">
        <h1 v-cloak>{{x}}</h1>
    </div>
</body>

5.v-if
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 <!-- v-if判断|显示隐藏 -->
        <h1 v-if="b">11111</h1>
        <h1 v-if="c">22222</h1>
 var vm = new Vue({
       
        data() {
            return {        
                b:false,
                c:true,
            }
        },

    })

时光912

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的初步运用

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
复制链接

扫一扫