欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

Vue起步

发布时间：2025/3/21 vue 33 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Vue起步 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

渐进式框架
创建Vue的实例对象，并传入配置对象
< div id=“root”>是一个容器，容器中写的不是原始html代码，而是Vue的模板代码
{{XXX}},xxx会自动读取data中的xxx属性

语法格式 data 用于定义属性，实例中有三个属性分别为：site、url、alexa。 methods 用于定义的函数，可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>初始Vue</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="vue_det"><h1>site:{{site}}</h1><h1>url:{{url}}</h1><h1>site:{{details()}}</h1></div><script type="text/javascript">var vm = new Vue({el:'#vue_det',data:{site:'zibo',url:'wwww',alexa:'11111'},methods:{details:function(){return this.site+"-学习梦想"}}})</script></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>初始Vue</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="vue_det"><h1>site:{{site}}</h1><h1>url:{{url}}</h1><h1>Alexa:{{alexa}}</h1></div>//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。<script type="text/javascript">var data = {site: '菜鸟',url: 'www',alexa: '255000'}var vm = new Vue({el: '#vue_det',data: data})//它们引用同样的对象document.write(vm.site == data.site)document.write('<br />')//设置属性也会影响到原始数据vm.site = "whh"document.write(data.site + '<br />')data.alexa = 1234document.write(vm.alexa)//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来document.write(vm.$data === data)document.write("<br />")document.write(vm.$el === document.getElementById('vue_det'))</script></body> </html>

总结

以上是生活随笔为你收集整理的Vue起步的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。