vue.js 常用语法及下载_vue.js基础语法下载-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53028882/article/details/114272748

本文介绍Vue.js的基本安装及使用方法，包括基础语法、指令如v-text、v-bind等的功能与应用场景，同时探讨了条件渲染、列表渲染、事件处理、表单输入绑定以及组件系统等关键特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

复制一下链接下载vue.js：

基础语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

	<div  id="app">
		   {{   msg  }}
	</div>
	
	<script>
	
		   new Vue({
				 el:  '#app',
				data: {
					msg:  'hello  world',
				}
		   })
	</script>

插值指令

v-text

在标签体中，显示文本数据，会覆盖便签体中的内容

		<div id="app">
				<p v-text="msg"></p>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					msg:  'hello world',
				}
			})

		</script>

v-html

在标签体中，显示网页内容，会覆盖便签体中的内容

		<div id="app">
				<p v-html="msg"></p>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					msg:  '<h1>hello world</h1>',
				}
			})

		</script>

v-bind

给标签设置属性值

	v-bind：attr = '值'
	v-bind：= '对象'
	v-bind:[attr] = '值'
	
	
	< !--  动态属性绑定 -- >
		
	<div id="app">
			<a v-bind:href="link_href"  v-text="link_name"></a>
	</div>
	
	<script>
		new Vue({
			el: '#app',
			data: {
				  link_href: 'http://www.baidu.com',
				  link_name: '百度',
			}
		})
	
	</script>
	
	
	
	< !-- class样式处理 -- > 
		<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
		  
		data响应式数据定义如下
		data: {
		
		  isActive: true,
		
		  hasError: false
		
	}

v-if,v-show

v-if :控制显示隐藏。如果if不成立，则整个dom不进行渲染，即不存在。

	   <body>
	        <div id="app">
	            <span v-if="flag">风电吃亏</span>
	            <span v-show="flag">itcast</span>
	            <button @click="toggle">切换</button>
	        </div>
	    </body>
	    <script>
	        //view model
	        new Vue({
	            el:"#app",
	            data:{
	                flag:false
	            },
	            methods:{
	                toggle:function(){
	                    this.flag = !this.flag;
	                }
	            }
	        })
	    </script>

v-for

循环。主要用于表格
标签，去循环一个数组。

		<body>
				<div id="app">
					<ul>
						<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
					</ul>
				</div>
			</body>
			<script>
				//view model
				new Vue({
					el:"#app",
					data:{
					   product:{
						   id:1,
						   name:"笔记本电脑",
						   price:5000
					   }
					}
				})
			</script>

v-on

指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码, (v-on:同等于@)

		<div id="example-1">
			<button v-on:click="counter += 1">Add 1</button>
			<p>The button above has been clicked {{ counter }} times.</p>
		</div>
		var example1 = new Vue({
			el: '#example-1',
		data: {
			counter: 0
		  }
		})

v-slot

插槽内容分发指令

v-model

双向绑定

	 <!-- 文本框 -->
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
		
	
	
	<!-- 多行文本框 -->
		<span>Multiline message is:</span>
		<p style="white-space: pre-line;">{{ message }}</p>
		<br>
		<textarea v-model="message" placeholder="add multiple lines"></textarea>

filter : 过滤器。格式化数据。如后台返回金额19数字。页面显示：￥19.00元。

vue 生命周期（钩子函数）


   <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello world'
            },
            beforeCreate: function() {
                console.log(this);
                showData('创建vue实例前', this);
            },
            created: function() {
                showData('创建vue实例后', this);
            },
            beforeMount: function() {
                showData('挂载到dom前', this);
            },
            mounted: function() {
                showData('挂载到dom后', this);
            },
            beforeUpdate: function() {
                showData('数据变化更新前', this);
            },
            updated: function() {
                showData('数据变化更新后', this);
            },
            beforeDestroy: function() {
                vm.test = "3333";
                showData('vue实例销毁前', this);
            },
            destroyed: function() {
                showData('vue实例销毁后', this);
            }
        });

        function realDom() {
            console.log('真实dom结构：' + document.getElementById('app').innerHTML);
        }

        function showData(process, obj) {
            console.log(process);
            console.log('data 数据：' + obj.message)
            console.log('挂载的对象：')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        // vm.message = "good...";
        vm.$destroy();
    </script>

vue 全局定义

		Vue.component(componentName,  options) 用来定义全局组件
			
			componentName : 组件名，是一个字符串
		  		组件的名称 多个单词 推荐使用 中划线 拼接，用来区分 html      							   
		 		网页中的标签	
				
			options : 定义组件的内容，结果 类似于 定义 Vue的结构 
				没有 el 选项
	 		
			data : 给组件定义响应式数据
				组件中的 data 是一个函数, 且函数必须返回一个 对象
				对象中定义的属性 会自动成为 组件中的响应式数据
		
		   	methods : 组件使用的方法
			
			template: 用来定义组件的模板（内容），格式是一个字符串
				常用 反逗号来进行定义
				
			# 使用组件
				在 模板中，通过使用 组件名 来引入组件