vue?用于构建用户界面的渐进式框架

如何引用(使用)vue

1.直接引入vue.js文件在head里面写

? ? ? ?没有网络也可以使用

? ? ? ?在该网址中下载如图所示文件https://cn.vuejs.org/v2/guide/installation.html?

? ? ? ?然后该文件引入项目中在html文档里script引用

? ? ? ?2.通过cdn方式引入在head里面写

? ? ? ?没有网络不能使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" ></script>

? ? ? ?3.通过脚手架cli方式引入,初学者不推荐

创建vue项目

? ? ? ?1.引入vue文件(以上三种都可以) head里面 title下面
? ? ? ?2.视图部分写在body中 html页面内容
? ? ? ?3.脚本部分写在script中?

?vue模板的语法 V大写

? ? ? ?1.定义不同类型的数据data: 在脚本中定义在视图页面使用?{{键名}}??数据都是采用键值对的方式定义的

视图部分:

        <div id="app">
			<!-- 视图中通过双花括号形式展示数据 -->
			数字: {{msg}}
			<p>字符串: {{msg2}}</p>
			<p>小数: {{numfloat}}</p>
			<p>布尔类型: {{bool}}</p>
			<p>数组: {{arr}}</p>
		</div>

脚本部分:?

		//创建vue对象 数据都是采用键值对的方式定义的
		var vm = new Vue({
			//元素--要定位的元素
			el:"#app",//el是element的简写 代表元素
			//数据--要绑定的数据
			data:{//依然采用键值对方式定义
				msg:123,
				msg2:"hello",
				numfloat:123.4,
				bool:true,
				arr:[1,2,3,4]
			}
		});

页面效果:

? ? ? ? 2.关于字符串拼接符号+ 符号两端有一段是字符串 +做拼接作用

? ? ? ? 3.关于算数运算符+ (同数学) 两端为数字类型参与+运算
? ? ? ? ? ?其他三个符号按照数学形式正常运算包括符号两端有数字类型的字符串也会正常运算

? ? ? ? 4.取整 (支持js方法)??Math.floor(值)

   视图部分: <p>+拼接: {{msg+msg2}}</p> <!-- 因为+两遍有字符串 -->
			<p>+加法运算符: {{msg+numfloat}}</p>
			<p>支持js函数: {{Math.floor(numfloat)}}</p><!-- Math.floor向下取整 -->
			<p>支持三元运算符: {{msg>numfloat?msg : numfloat}}</p>


   脚本部分:	<script type="text/javascript">
                 var vm = new Vue({
			    //元素--要定位的元素
			    el:"#app",//el是element的简写 代表元素
                data:{//依然采用键值对方式定义
				    msg:123,
				    msg2:"hello",
				    numfloat:123.4,
				    bool:true,
				    arr:[1,2,3,4]
			        }
		        });
            </script>

页面效果:

????????5.调用方法methods? 在脚本中定义方法?在视图中调用方法调用函数: {{方法名(键名)(参数)}}?采用键值对方式定义

视图内容:    调用函数: {{sayHi()}} 
			<br>
			调用函数:{{sayHello('哈哈哈')}}

脚本内容:    <script type="text/javascript">
		        //创建vue对象 数据都是采用键值对的方式定义的
		        var vm = new Vue({
			    //元素--要定位的元素
			    el:"#app",//el是element的简写 代表元素
			    methods:{//依然采用键值对方式定义
				    sayHi:function(){
					alert("Hi...");
				    },
				sayHello:function(a){
					alert(a);
				    }
			    }
		    });
	    </script>

页面效果:

6.修改data数据
? ? ? ? 方式一: vm.$data.msg = 256;
? ? ? ? 方式二: vm.msg = 345;

		var vm = new Vue({
			//元素--要定位的元素
			el:"#app",//el是element的简写 代表元素
			//数据--要绑定的数据
			data:{//依然采用键值对方式定义
				msg:123
			}			
		});
		
		//修改data数据
		 vm.$data.msg = 256;
		 vm.msg = 345;